オフラインでいろいろしたい場合、
・Web Storage
・IndexedDB
・Application Cache
など、HTML5にはオフラインでWebアプリケーションを利用するための方法がいくつかあります。
IndexedDBの特徴としては、
・Key-Value型
・javascriptから操作ができる
・オリジン(プロトコル/ドメイン/ポート番号)ごとににデータをもつ
・Cookieのようにサーバに自動的に送られはしない
といったところでしょうか。
私が持っているイメージはCookieを大容量・高機能にした、という感じです。
ただし、IndexedDBはKey-Value型なので、それなりのデータ量を扱う場合は、普段からRDBMSをデータストアとしている人には使いづらいところがあるかもしれません。
そんな人におすすめ、IndexedDBをRDBMSのように使える「lovefield」のご紹介をします。
http://qiita.com/ryo-ma/items/33386ec4b4c3b0261ce3
以下がテーブル定義を作成してInsert、Selectするサンプルコードです。
// スキーマを作成 var schemaBuilder = lf.schema.create('SchemaName', 1); // テーブルを作成 schemaBuilder.createTable('TableName'). addColumn('id', lf.Type.STRING). addColumn('name', lf.Type.STRING). addPrimaryKey(['id']); // テーブルにレコードを追加 schemaBuilder.connect().then(function(db) { table = db.getSchema().table('TableName'); var row = table.createRow({'id': '1', 'name': 'name1'}); db.insertOrReplace().into(table).values([row]).exec(); }); // テーブルからレコードを抽出する schemaBuilder.connect().then(function(db) { db.select().from(orders).exec().then(function(rows) { rows.forEach(function(row){ console.log(row.id); }); }); });
テーブル操作は非同期なので、同期処理をしたい場合はthenで処理を書いてください。
あとテーブル構造が変わるとよく考えないと面倒です。
私の場合は重複したデータをもつカラムをキー設定してしまったらしく、手動でブラウザのキャッシュを消すまでconnectができなくなりました。。
どうテーブル構造が変わった場合にどうアップデートさせるかはここに書いている模様。
https://github.com/google/lovefield/blob/master/docs/spec/03_life_of_db.md
あまり情報は多くなく、現時点でQiitaに2件、StackOverFlow(英語)に17件と、Googleが開発している割にいまいち人気がないようです。
かなり使いやすいので広まるといいなー。