HTML5 Webストレージでデータを保存

2013.01.20

HTML5

この記事は最終更新日から1年以上が経過しています。

HTML5で利用可能となったAPIで「Web Storage（Webストレージ）」と呼ばれるものがあります。

Webストレージはクライアント側にデータを保存したり読み出しを出来るようにする仕組みとなっております。

保存期間の異なる2種類のWebストレージ

Webストレージには以下の2種類があります。

※ローカルストレージ（localStorage）

※セッションストレージ（sessinStorage）

ローカルストレージはクライアント側に保存したデータを明示的に削除するまで永続的に保存します。

セッションストレージはデータ保存（保存するコードを実行）を行ったWebブラウザが開いている間だけ、一時的に保存することができます。

ローカルストレージは明示的に削除するまで永続的に保存なので、Webブラウザを閉じてり、OS再起動を行ってもデータは残されています。

セッションストレージはデータを保存したページ（webサイト）から移動してもデータは残されていますが、

Webブラウザを閉じると自動的にデータは削除されます。

タブで開くWebブラウザの場合、データ保存を行ったページのタブを閉じるとセッションは途切れ、

保存したデータは消えてしまいます。

一つのタブがwebブラウザに当たりますので、タブ間のセッションストレージの情報は共有されないことになります。

Webストレージに保存できるサイズ

Webストレージに保存出来るサイズはブラウザの実装に依存しております。

W3Cでは最低5Mバイトを推奨しています。

Webストレージではドメイン単位（厳密にはオリジン（プロトコル＋ドメイン＋ポート番号）単位）のデータ管理を行っています。

この5Mバイトは1ドメイン当たりのデータの合計の上限となりますので、

WebサイトのTopページとそのサイトの別ページでそれぞれ個別にWebストレージを利用した場合、

その合計が5Mバイト以内ではないといけません。

データの保存方法

Webストレージには、「キー名」と「値」のペアでデータを保存します。

よって、サイト内で、複数のキーに対してそれぞれのデータを保存することが可能となっております。

例としてwebのテストの点数をWebストレージで管理する場合、

HTMLというキーに対して90という値を、HTML5というキーに対して30という値を対応付けてデータを保存した場合、

HTMLと指定すれば90、HTML5と指定すれば30と返してくれます。

JSONやXMLなどでデータを複数保存を行ったりすることも可能となっております。

「web帳」というキーに対して

例

{
  "HTML":"90",
  "HTML5":"30",
  "CSS3":"84",
  "Javascript":"45"
}

getItemとsetItem

Webストレージに保存するデータは全て「キー」で管理します。

データを取り出す場合はgetItemを使用、保存する場合はsetItemを使用します。

ローカルストレージ

変数 = localStorage.getItem(“キー名”);

localStorage.setItem(“キー名”, 値);

セッションストレージ

変数 = sessionStorage.getItem(“キー名”);

sessionStorage.setItem(“キー名”, 値);

取り出す場合は”キー名”を指定、保存する場合は”キー名”,”値”で保存を行います。

その他のプロパティとメソッド


名前	機能	例
length	保存されているキー数（データの数）を参照	hoge = localStorage.length;
key(n)	保存しているn番目のキー名を返す。	hoge = localStorage.key(1);
clear()	そのドメインで使用されているストレージのデータをすべて削除。（引数なし）	localStorage.clear();
removeItem(“キー名”)	引数で与えられたキー名のデータを削除	localStorage.removeItem(“foo”);

テスト

webストレージのテストページを作成しました。

ポチポチすると、回数が増えていきます。

通算のポチポチには「ローカルストレージ」を設定。

今回のポチポチには「セッションストレージ」を設定しております。

リセットで回数がリセットされます。

URL

http://webcyou.com/demo/js/webstorage/

ブラウザを閉じたりして確認してみてください。

記事の続き