Storage

sessionStorage

sessionStorage はページセッションの間利用できるストレージを保持するグローバルオブジェクトです。ページセッションはブラウザが開かれている間だけ継続され、ページが更新されたり復元されても持続されます。ページを新しいタブやウィンドウで開くと、新しいセッションが開始されます。

// 現在のセッションの保存領域にデータを保存する
sessionStorage.username = "John";

// 保存されたデータにアクセスする
alert( "username = " + sessionStorage.username );

sessionStorage オブジェクトは、誤ってブラウザを更新してしまっても一時データが失われないように、そのデータを保存および復元したい場合に最も役立ちます。

使用例:

テキスト入力欄の内容を自動で保存します。もし誤ってブラウザを更新してしまっても、テキスト入力欄の内容が復元されるため、書いた内容が失われません。

 // 値を記録するテキスト入力欄を取得
 var field = document.getElementById("field");
 
 // 自動保存された値が存在するか確認
 // (ページが誤って更新された場合にのみ実行される)
 if ( sessionStorage.autosave ) {
     // テキスト入力欄の内容を復元
     field.value = sessionStorage.autosave;
 }
 
 // テキスト入力欄の内容を 1 秒ごとにチェック
 setInterval(function(){
     // 取得結果を sessionStorage オブジェクトに保存
     sessionStorage.autosave = field.value;
 }, 1000);

詳細:

• sessionStorage 仕様

globalStorage

// ドメイン mozilla.org にあるスクリプトのみがアクセスできるデータを保存する
globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?";

具体的には、globalStorage オブジェクトを使うと、データの保存が可能なたくさんの異なるストレージオブジェクトへのアクセスが可能になります。たとえば、globalStorage を使用した Web ページをドメイン developer.mozilla.org に作成したとすると、以下のストレージオブジェクトが利用できます。

• globalStorage['developer.mozilla.org'] - サブドメイン developer.mozilla.org にあるすべての Web ページがこのストレージオブジェクトに読み書きできる。

使用例:

以下の例を使用する場合には、実行結果を見たいページすべてにこれらのコードが書かれたスクリプトを挿入する必要があります。

ユーザーが訪れた特定のサブドメインでユーザー名を記憶させます。

 globalStorage['developer.mozilla.org'].username = "John";

ユーザーがあなたのドメインにあるすべてのページを何回訪れたか記録します。

 // データはすべて文字列として保存されるので parseInt が必要
 globalStorage['mozilla.org'].visits =
     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;