ウェブストレージとは？
■ウェブストレージについて
ストレージは、記憶装置を意味します。
ウェブストレージを使用すると、JavaScript からデータをローカル環境に保存することができます。
ウェブストレージには、以下の種類があります。
| 名称 | 解説 |
| sessionStorage | セッションストレージ 一時的にデータを保存することができます。ウィンドウを閉じるタイミングで消えます。同じページを複数のウィンドウで開いた場合、別々に保存されます。 |
| localStorage | ローカルストレージ 永続的にデータをローカル環境に保存することができます。 |
■オリジンについて
ウェブストレージは、オリジン（Origin）と呼ばれる単位ごとに隔離して保存されます。
オリジンは、「プロトコル、ドメイン、ポート番号」の３つからなる識別情報です。
「プロトコル、ドメイン、ポート番号」の３つが完全一致していれば、どのページからでも同じウェブストレージデータにアクセスでき、情報を共有することができます。
「プロトコル、ドメイン、ポート番号」のうち、１つでも相違があると、ウェブストレージデータは別物として扱われます。
「任意のオリジン内で保存したデータ」に別オリジンからアクセスすることはできません。
同じオリジンであればアクセスできるので、誤って保存データを上書きしたり消したりしないよう注意します。
■ウェブストレージにアクセスする
window オブジェクトのプロパティにストレージ用のインスタンスが格納されています。
各ストレージにアクセスする例です。
これらのプロパティが真となる場合、ブラウザがウェブストレージに対応しています。
セッションストレージにアクセスする
// ウェブストレージに対応している
if(window.sessionStorage){
// セッションストレージオブジェクトを取得する
var session_storage = window.sessionStorage;
// 出力テスト
console.log(session_storage);
}
ローカルストレージにアクセスする
// ウェブストレージに対応している
if(window.localStorage){
// ローカルストレージオブジェクトを取得する
var local_storage = window.localStorage;
// 出力テスト
console.log(local_storage);
}
データを保存する
■データを保存する
ストレージにデータを保存するには、setItem() メソッドを使用します。
第01引数に、「キー」となる好きな名前を指定します。
第02引数に、保存したいデータを指定します。文字列を指定します。
「キー」を変更することで、「キー」ごとに個別にデータを保存することができます。
保存データは、強制的に文字列に変換されます。数値などの状態では保存できないので注意します。
JSON を使用すると、オブジェクト型の保存と復元を簡単に実装することができます。
このメソッドは、同期実行です。保存が完了するまで制御が返りません。
大容量のデータの保存を試みると、その間ブラウザが応答不能になるので注意します。
使用例です。
セッションストレージの "test_key" に、文字列を保存する
// ウェブストレージに対応している
if(window.sessionStorage){
// 保存したい適当な文字列
var str = "保存テスト";
// 文字列を保存
sessionStorage.setItem("test_key",str);
}
ローカルストレージの "test_key" に、 JSON 形式で保存する
// ウェブストレージに対応している
if(window.localStorage){
// 保存したい適当なオブジェクト
var obj = {
ary:[0,1,2],
obj:{
a:0,
b:1,
c:2
}
};
// オブジェクトから JSON 文字列に変換
var str = JSON.stringify(obj);
// JSON 文字列を保存
localStorage.setItem("test_key",str);
}
データを読み込む
■データを読み込む
ストレージに保存したデータを取り出すには、getItem() メソッドを使用します。
第01引数に、保存時に指定した「キー」の名前を指定します。
戻り値から保存したデータが文字列で得られます。存在しない場合、null が得られます。
使用例です。
セッションストレージの "test_key" に格納した文字列を取得する
// ウェブストレージに対応している
if(window.sessionStorage){
// ------------------------------------------------------------
// 書き込みテスト
// ------------------------------------------------------------
// 保存したい適当な文字列
var str = "保存テスト";
// 文字列を保存
sessionStorage.setItem("test_key",str);
// ------------------------------------------------------------
// 読み込みテスト
// ------------------------------------------------------------
// 文字列を読み込み
var str = sessionStorage.getItem("test_key");
}
ローカルストレージの "test_key" に格納したデータを取得して、JSON 文字列からオブジェクトを復元する
// ウェブストレージに対応している
if(window.localStorage){
// ------------------------------------------------------------
// 書き込みテスト
// ------------------------------------------------------------
// 保存したい適当なオブジェクト
var obj = {
ary:[0,1,2],
obj:{
a:0,
b:1,
c:2
}
};
// オブジェクトから JSON 文字列に変換
var str = JSON.stringify(obj);
// JSON 文字列を保存
localStorage.setItem("test_key",str);
// ------------------------------------------------------------
// 読み込みテスト
// ------------------------------------------------------------
// JSON 文字列を読み込み
var str = localStorage.getItem("test_key");
// JSON 文字列からオブジェクトに変換
var obj = JSON.parse(str);
}
データを削除する
■データを削除する
ストレージに保存したデータを削除するには、removeItem() メソッドを使用します。
第01引数に、保存時に指定した「キー」の名前を指定します。
使用例です。
セッションストレージの "test_key" に格納されたデータを削除する
// ウェブストレージに対応している
if(window.sessionStorage){
// 指定したキーに格納したデータを削除する
sessionStorage.removeItem("test_key");
}
ローカルストレージの "test_key" に格納されたデータを削除する
// ウェブストレージに対応している
if(window.localStorage){
// 指定したキーに格納したデータを削除する
localStorage.removeItem("test_key");
}
■すべてのデータを削除する
使用例です。
セッションストレージのすべてのデータを削除する
// ウェブストレージに対応している
if(window.sessionStorage){
// ストレージ内のデータをすべて削除する
sessionStorage.clear();
}
ローカルストレージのすべてのデータを削除する
// ウェブストレージに対応している
if(window.localStorage){
// ストレージ内のデータをすべて削除する
localStorage.clear();
}