Web Storage

« 前のエントリー

今回の勉強会はWeb Storageについてです。

Web Storageの概要

Cookieと同じようにクライアントにkey:value形式のデータを保存する仕組みです。
元々はHTML5の仕様の一部として定義されていましたが、「HTML 5 differences from HTML 4」で切り離されています。
Web Storageではセッション単位で保存する「sessionStorage」と永続的に保存する「localStorage」があります。

Cookie,sessionStorage,localStorageの違い

	Cookie	sessionStorage	localStorage
データの有効期限	指定期限まで	ウィンドウやタブを閉じるまで	永続的
参照範囲	domain,path単位	ウインドウ,origin単位	origin単位
データ量の上限	4KB	5MB
サーバーへのデータ送信	毎回送信	必要時にスクリプトで送信

※originは「プロトコル+ドメイン+ポート番号」で識別されます。

Web Storageはデータ量の上限が5MBと大きく、大量のデータを保存できます。
Cookieのように毎回サーバーへ送信することはなく、必要時のみスクリプトで取得するので、大量のデータを保存しても通信速度に影響をあたえることはありません。

データの保存や取得などの方法

//サポート確認
if(!window.localStorage){
	return; //サポートされていない
}

//localStorageからsessionStorageに変更する場合に、変更が一箇所で済むように変数に入れて使う
var storage = window.localStorage;

//保存されているデータ数
storage.length;

//n番目のkeyを取得
storage.key(n);

//データの保存
storage.setItem("samplekey", "Sample Data");
storage["samplekey"] = "Sample Data";
storage.samplekey = "Sample Data";

//データの取得
storage.getItem("samplekey");
storage["samplekey"];
storage.samplekey;

//データの削除
storage.removeItem("samplekey"); //samplekeyに対応しているデータを削除
storage.clear(); //データをすべて削除