HTML5の「Web Storage API」を習得するためのリンク集 - モバイル通信とIT技術をコツコツ勉強するブログ

ブラウザにデータを保存できる，Web Storage API。

それを学習するためのリンク集。

Web Storageによるテキストデータの保存(1/6):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=179002

HTMLからローカルデータベースが使えるらしい」という話は耳にしたことがあるはずです。これは大変便利ですが、「データベースまで大げさなものは必要ないんだけどな］という人が実は大半かも知れません。こうした人のために、実はデータベースよりもっと手軽で便利なものがあるのです。それが「Webストレージ」と呼ばれる機能です。

Webストレージは、文字通り「Webのストレージ（外部記憶装置）」です。Webページで使用するデータをブラウザ外（ローカルボリューム）に保存する機能です。

これには２つの種類があります。

セッションストレージセッションにデータを保管します。セッションというのは、クライアントとサーバー間の連続した接続のことです。Webブラウザからサーバにアクセスしたとき、そのページを開いているブラウザを閉じるまでデータを保管するためのものです。

ローカルストレージローカルボリュームにデータを保存するものです。ハードディスク内に保存するので、ブラウザを終了したあともデータは保持し続けられ、ブラウザを起動すればいつでも呼び出すことができます。

要するに、セッションストレージは一時的な保存、ローカルストレージは永続的な保存

Web Storageによるテキストデータの保存(2/6):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=179...

Webストレージは、セッション、ローカルボリュームそれぞれに「sessionStorage」「localStorage」という名前でオブジェクトが用意されています。

読み書きは、いずれのオブジェクトも「getItem」「setItem」というメソッドとして用意されています。これらはいずれも値にキーを割り振って保管するようになっています。

getItemでは、引数にキーを指定すると、そのキーに保管されているデータを返します。setItemでは、第１引数に指定したキーに、第２引数のデータを保管します。

Web Storageによるテキストデータの保存(3/6):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=179...

サンプルとして「簡単メモ書きWebページ」というのを考えてみます。１行だけの入力フォームを用意し、送信するとそのテキストをローカルストレージに保存する、というものです。フォームの下には、保存されたメモ書きが一覧で表示されるようにします。

Web Storageによるテキストデータの保存(4/6):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=179...

localStorage.length――ローカルストレージに保管されているデータ数を返します。 localStorage.key( インデックス )――インデックスの番号を引数に渡すと、その番号のキーを返します。

ローカルストレージは、連想配列などとは違い、インデックスでもデータを管理できます。データを保管すると、そのキーにはインデックス番号が割り振られ、ゼロから順にナンバリングされるのです。

ですから、lengthで項目数を取得し、繰り返しを使ってゼロ番から順にkeyの値を取り出していけば、すべてのキーと値を処理していくことができるのです。

Web Storageによるテキストデータの保存(5/6):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=179...

多数の項目をどうやって一つのテキストとして保管すればいいのか。これには「JSON」を利用する手があります。

Web Storageによるテキストデータの保存(6/6):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=179...

オブジェクトをJSONのテキストに変換するには、JSONオブジェクトのstringifyというメソッドを利用しています。これは、引数のオブジェクトをJSON形式のテキストに変換して返すものです。

取得したテキストを元にしてJSONオブジェクトを生成するところがポイントとなります。これは、JSONオブジェクトのparseメソッドを使います。

このJSONというオブジェクトは、比較的最近のブラウザでないと利用できないので注意してください。

詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (8) Web Storage | マイナビニュース
http://news.mynavi.jp/special/2009/ht...

localStorage … オリジン(プロトコル + ドメイン + ポート)ごとに異なるストレージとなる。

複数のウィンドウをまたいでストレージは共通。

ウィンドウが閉じられてもデータは消失しない

Web Storage - Web Storageのサンプル - HTML5 JavaScript API入門
http://javascript-api.sophia-it.com/r...

ローカルストレージの保持単位は、URLのスキーム、ドメイン、ポート番号を組み合わせた情報（オリジンといいます）になります。

ローカルストレージはウィンドウやタブが閉じられたり、ブラウザが終了しても失効せず、つぎに開かれた時点でも同じ内容を保持します。

Web Storage−HTML5のAPI、および、関連仕様
http://www.htmq.com/webstorage/

removeItem(key) …… keyに対応するvalueを削除する clear() …… データをすべてクリアする

その他のAPI：

Web SQL Database APIによるデータベース・アクセス(1/6):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=221001

Web SQL Database APIは、W3CのHTML5勧告では既に更新が停止しており、HTML5への実装は見送られることが確定しています。データベース機能は、非SQLの「Indexed Database API」の利用を推奨しています。

詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (9) Web Database | マイナビニュース
http://news.mynavi.jp/special/2009/ht...

たった1つのSQLを実行するだけのコードなのに、コールバック関数だらけで非常に読みづらい。UI操作を妨げないようすべてのメソッドシグネチャが非同期呼出を前提としているので、致し方ないところではあるが…。

Indexed Database APIによるデータベース(1/7):JavaScriptによるHTML5プログラミング入門
http://libro.tuyano.com/index3?id=697001

Indexed Database APIは、まだ完全に確定した仕様というわけではないため、今後、ブラウザの実装などが変更される可能性もあります。

HTML5 APIのJavaScriptを学ぶための学習サイト集
http://computer-technology.hateblo.jp/entry/20140302/p1