Web Storageでデータの読み書きを行うには？
解説
ブラウザにデータを保存するWeb Storageには、データを保持する単位の違いに応じてローカルストレージとセッションストレージという二種類の保存領域があります。この二つの違いは、セッションストレージはタブやウィンドウごとに生成され、閉じられると削除されるのに対して、ローカルストレージは意図的に削除しない限り内容が保持されるということです。
ローカルストレージとセッションストレージの対比とデータが保持される単位については、ローカルストレージとセッションストレージの違いは？を参照ください。
ローカルストレージにはwindowオブジェクトのlocalStorage属性、セッションストレージにはwindowオブジェクトのsessionStorage属性を通じてアクセスします。
// ローカルストレージ
var locStorage = window.localStorage;
// セッションストレージ
var sesStorage = window.sessionStorage;
この二つは同じStorageインターフェイスのオブジェクトで、属性もメソッドも共通であるため、ここではStorageオブジェクトとして統一的に解説します。
Storageオブジェクトのデータ格納方式は辞書のような項目名付きの方式（Key-Value Store）で、文字列をインデックスとする配列のようにして読み書きします。
データを格納する場合は、「setItem(key, value)」メソッドを呼び出します。キーkeyはデータを保存する項目名、値valueはその項目に保存するデータです。
同じキーの項目がすでに存在した場合は、すでにある項目の値が新しい値valueで上書きされます。このため、項目のキーが重複することはありません。
値valueに文字列以外を指定した場合は、暗黙的に「Object.toString()」メソッドによって文字列に変換された結果が格納されます。
// storageはStorageオブジェクト
// キー「name」で値「Jack」をStorageオブジェクトに格納
storage.setItem("name","Jack");
データを取得する場合は、「getItem(key)」メソッドを使用します。このメソッドはキーに対応する値を返し、キーが存在しなければエラーではなくnullを返します。
// キー「name」で格納した値を取得
var name = storage.getItem("name");
すべてのデータ項目を削除したい場合は、「clear()」メソッドを呼び出します。
// 格納していたデータをすべて削除
storage.clear();
特定のデータ項目を削除したい場合は、「removeItem(key)」メソッドを使用します。キーkeyで指定した項目が存在しなければ何もしません。
// 5 項目追加
storage.setItem("name0","Dick");
storage.setItem("name1","Jack");
storage.setItem("name2","John");
storage.setItem("name3","Kate");
storage.setItem("name4","Mary");
storage.setItem("name5","Bruno");
// 1 項目削除
storage.removeItem("name3");
保存されている項目数は読み取り専用の「length」属性を参照します。
特定の位置のキーを取得したい場合は、「key(index)」メソッドを使います。indexは格納位置を表し、ゼロから始まる整数値です。キーは一定の順序でStorageオブジェクトに格納されていますが、この順番は追加順ではありません。特定のキーの格納位置は、追加・削除では変化しますが、値の更新では変化しないことが保障されています。
indexに対応するキーがない場合はnullを返します。
特定のキーの格納位置を事前に知ることは難しいため、通常は、個別のキーについてではなく、以下のようにすべてのキーを列挙する場合に使用します。
// 項目を列挙。storage.lengthは項目数
for( var i = 0; i < storage.length; i++){
// インデックス i のキーを取得
// 格納順は、追加順ではない
var key = storage.key(i);
name = storage.getItem(key);
console.log("index:" + i + " key:" + key + " name:" + name);
}
Storageオブジェクトへ任意のオブジェクトを格納する場合、自動的に行われる「Object.toString()」メソッドによる文字列変換では、ほとんどの場合、もとのオブジェクトに含まれていた情報のかなりの部分が失われてしまい、取り出した際に意図通りに復元することができません。
そこで、こうした場合には、JSON形式に変換する「JSON.stringify(value)」メソッドとJSON形式から復元する「JSON.parse(text)」メソッドを使用します。JSONは、JavaScriptのオブジェクトを文字列形式で表現する一般的な形式で、これらの変換・復元メソッドもメジャーなブラウザでは標準的に組み込まれています。
オブジェクトをJSON形式の文字列に変換する場合は以下のようにします。
var array1 = [1,2,3,4,5];
// 配列をJSONに変換
// JSON文字列の中身は"[1,2,3,4,5]"になる。
var json = JSON.stringify(array1);
JSON形式の文字列をオブジェクトに変換する場合は以下のようにします。
var array2 = JSON.parse(json);
標準規格では項目の読み書きには、ここまで紹介してきた専用のメソッドを使用することが推奨されていますが、Storageオブジェクトに、キーと同名のプロパティが存在するかのようにして、データ項目にアクセスすることも可能です。
// キー「myCustomKey」で値「Mary」をStorageオブジェクトに格納
// キーを通常のプロパティの形式で追加し、値をセットする。
storage.MyCustomKey = "Mary";
// キー「myCustomKey」の値を専用のメソッドを使って「Jack」に更新
storage.setItem("myCustomKey","Jack");
// キーを通常のプロパティの形式で読み込む
var name = storage.myCustomKey;
// キーを連想配列形式で読み込む
var name2 = storage["myCustomKey"];
関連項目
