ざっくりとindexedDBを使ってみる

2013-08-25T00:00:00+00:00 HTML5 JavaScript

今作ってる物ではWeb SQL Databaseを採用しているのだけど、これindexedDBが良いんじゃないのかっていうのを思ったので今更ながらちょいと調査的にやってみた

要件

単純にURLを格納するindexedDBを構築して、一覧取得・保管・削除を持つJavaScriptオブジェクトで操作できるようにする。

store.js

(function() {

  "use strict";

  var Share = (function() {

    function Share() {}

    Share.prototype.getDB = function(callback) {
      var req = indexedDB.open("shares");

      req.onupgradeneeded = function() {
        var db = req.result;

        var store = db.createObjectStore(
          "share",
          {
            "keyPath": "id",
            "autoIncrement": true
          }
        );
        store.createIndex("by_url", "url", { "unique": true });
      };

      req.onsuccess = function() {
        callback(req.result);
      };
    };

    Share.prototype.urls = function(callback) {
      this.getDB(function(db) {
        var tx = db.transaction("share", "readonly");
        var store = tx.objectStore("share");

        // var req = store.openCursor();

        var index = store.index("by_url");
        var req = index.openCursor();

        var results = [];

        req.onsuccess = function() {
          var csr = req.result;

          if (csr) {
            results.push(csr.value);

            // continueするとonsuccessが走る
            csr.continue();
          } else {
            callback(results);
          }
        };
      });
    };

    Share.prototype.save = function(url, callback) {
      this.getDB(function(db) {
        var tx = db.transaction("share", "readwrite");
        var store = tx.objectStore("share");
        var result = store.put({ "url": url });

        callback();
      });
    };

    Share.prototype.delete = function(id) {
      this.getDB(function(db) {
        console.log("delete");

        var tx = db.transaction("share", "readwrite");
        var store = tx.objectStore("share");

        var req = store.delete(id);
        req.onsuccess = function() {
        };
        req.onerror = function(e) {
          console.log(e);
        }
      });
    }

    return Share;

  })();

  var s = new Share();

  s.save("foobar", function(result) {
    s.urls(function(results) {
      results.forEach(function(result) {
        var id = result.id;
        var url = result.url;

        console.log(id + ": " + url);

        if (url === "foobar") {
          s.delete(id);
        }
      });
    });
  });

})();

まぁドキュメント読んだ方が良いと思うんで(ry

http://www.w3.org/TR/IndexedDB/

com.google.appengine.api.oauth.OAuthServiceのテスト Chrome Extension+Google App Engine(+OAuth)