Client-Side DatabaseとLocal Storage
Client-Side Storage(クライアントサイドストレージ)はリレーショナルDB(SQL文を使うようなDB)。バックグラウンドはSqliteで実装されている事が多いみたいです。
Local Storageはキーバリュー型(キーを指定して値を取得)のDBです。
サンプル
Client-Side Storage
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <script> var systemDB; function initDB() { var db = null; try { if (window.openDatabase) { db = window.openDatabase("sampledb", "1.0", "Sample Database", "1048576"); if (!db) { alert("データベースストレージが使えません。"); } db.transaction( function (transaction) { var text = document.getElementById('sample_text').value; transaction.executeSql('CREATE TABLE IF NOT EXISTS sample(id INTEGER NOT NULL PRIMARY KEY, t TEXT);', [], function(tx, rs) { insertTextData(); }) } ); } else { alert("データベースストレージはサポートされていません。"); } } catch (error) { if (e == INVALID_STATE_ERR) { alert("Invalid database version."); } else { alert("Unknown error "+e+"."); } } return db; } function insertTextData() { var db = systemDB; if (!db) { alert("データベースのオープンに失敗しています。"); return; } db.transaction( function (transaction) { transaction.executeSql("INSERT INTO sample VALUES(0, '')") } ); } function updateTextData() { var db = systemDB; if (!db) { alert("データベースのオープンに失敗しています。"); return; } db.transaction( function (transaction) { var text = document.getElementById('sample_text').value; transaction.executeSql("UPDATE sample set t=? where id=0", [text]) } ); } function saveTextData() { updateTextData(); } function loadTextData() { var db = systemDB; if (!db) { alert("データベースのオープンに失敗しています。"); return; } db.transaction( function (transaction) { transaction.executeSql('SELECT * FROM sample WHERE id=0', [], function(tx, rs) { if (rs.rows.length == 0) { insertTextData(); } else { var row = rs.rows.item(0); document.getElementById('sample_text').value = row.t; } }); } ); } window.addEventListener("load", function() { systemDB = initDB(); loadTextData }, true); </script> <title>Client-Side Database</title> </head> <body> Client-Side Database<br> <input onClick="saveTextData()" type="button" value="save"><input onClick="loadTextData()" type="button" value="load"><br> <textarea id="sample_text" rows="5" cols="30"></textarea> </body> </html>
Local Storage
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja-JP" lang="ja-JP"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="initial-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <script> function saveTextData() { localStorage.t = document.getElementById('sample_text').value; } function loadTextData() { document.getElementById('sample_text').value = localStorage.t; } window.addEventListener("load", function() { if (!localStorage) { alert('Local Storageをサポートしていません'); } }, true); </script> <title>Local Storage</title> </head> <body> Local Storage<br> <input onClick="saveTextData()" type="button" value="save"><input onClick="loadTextData()" type="button" value="load"><br> <textarea id="sample_text" rows="5" cols="30"></textarea> </body> </html>
関連情報
Safari Client-Side Storage and Offline Applications Programming Guide: Introduction
https://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html
HTML 5のローカルデータベース機能: まずDatabaseオブジェクトを取得する - builder
http://builder.japan.zdnet.com/html-css/sp_firefox-3-for-developer-2008/20385468/
HTML 5のローカルデータベース機能を利用してアドレス帳を作成する - builder
http://builder.japan.zdnet.com/html-css/sp_firefox-3-for-developer-2008/20385792/
Safari 3.1 に実装された「Client-side database storage (SQL API)」とは何か? - IT戦記
http://d.hatena.ne.jp/amachang/20080327/1206607704
HTML5のlocalStorageでiPhone用Webアプリを高速化(1/2) - @IT
http://www.atmarkit.co.jp/fsmart/articles/iphoneweb04/01.html
Client-Side Databaseの方の規格。
Web Workers
http://dev.w3.org/html5/workers/#a-worker-for-updating-a-client-side-database
Local Storageの方の規格。
Web Storage
http://dev.w3.org/html5/webstorage/#the-localstorage-attribute