ウェブストレージとは？
■ウェブストレージについて
ストレージは、記憶装置を意味します。
ウェブストレージを使用すると、JavaScript からデータをローカル環境に保存することができます。
保存できるのは文字列形式です。
JSON 形式を利用すると、簡単にデータの保存と復元ができます。
ウェブストレージには以下の種類があります。
| 名称 | 解説 |
| sessionStorage | セッションストレージ 一時的にデータを保存することができます。ウィンドウを閉じるタイミングで消えます。同じページを複数のウィンドウで開いた場合、別々に保存されます。 |
| localStorage | ローカルストレージ 永続的にデータをローカル環境に保存することができます。 |
■オリジンについて
ウェブストレージはオリジン（Origin）と呼ばれる単位ごとに隔離して保存されます。
オリジンは、「プロトコル、ドメイン、ポート番号」の３つからなる識別情報です。
「プロトコル、ドメイン、ポート番号」の３つが完全一致していれば、どのページからでも同じウェブストレージデータにアクセスでき、情報を共有することができます。
「プロトコル、ドメイン、ポート番号」のうち１つでも相違があるとウェブストレージデータは別物として扱われます。
「任意のオリジン内で保存したデータ」に別オリジンからアクセスすることはできませんが、
同じオリジンであればアクセスできるので、誤って保存データを上書きしたり消したりしないよう注意します。
■ウェブストレージにアクセスする
window オブジェクトのプロパティにストレージ用のインスタンスが格納されています。
各ストレージにアクセスする例です。
セッションストレージにアクセスする
var ss = window.sessionStorage;
console.log(ss);
ローカルストレージにアクセスする
var ls = window.localStorage;
console.log(ls);
データを保存する
■データを保存する
ストレージにデータを保存するには、setItem() メソッドを使用します。
第01引数に、「キー」となる好きな名前を指定します。
第02引数に、保存したいデータを指定します。文字列を指定します。
「キー」を変更することで「キー」ごとに個別にデータを保存することができます。
保存データは、強制的に文字列に変換されます。
数値などの状態では保存できないので注意します。
JSON を使用すると保存と復元を簡単に実装することができます。
使用例です。
セッションストレージの "test_key" というキーに保存する
var str = "保存テスト";
// 文字列を保存
sessionStorage.setItem("test_key",str);
ローカルストレージの "test_key" というキーに JSON 形式で保存する
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" というキーからデータを取得する
// 文字列を読み込み
var str = sessionStorage.getItem("test_key");
ローカルストレージの "test_key" というキーからデータを取得してJSON 文字列からオブジェクトを復元する
// JSON 文字列を読み込み
var str = localStorage.getItem("test_key");
// JSON 文字列からオブジェクトに変換
var obj = JSON.parse(str);
データを削除する
■データを削除する
ストレージに保存したデータを削除するには、removeItem() メソッドを使用します。
第01引数に、保存時に指定した「キー」の名前を指定します。
読み込み例です。
セッションストレージの "test_key" というキーを削除する
// 該当するキーのデータを削除する
sessionStorage.removeItem("test_key");
ローカルストレージの "test_key" というキーを削除する
// 該当するキーのデータを削除する
localStorage.removeItem("test_key");
■すべてのデータを削除する
使用例です。
セッションストレージのすべてのデータを削除する
// ストレージ内のデータをすべて削除する
sessionStorage.clear();
ローカルストレージのすべてのデータを削除する
// ストレージ内のデータをすべて削除する
localStorage.clear();
問答収集
