JavaScript ローカルストレージの保存と参照

ブラウザは接続先のドメインごとにWebストレージ領域を割り当てられる。ストレージにはkey,valueの形式で保存可能。

ブラウザが変わればストレージ領域も変わる。

(そういったコードを書かない限り)サーバに送信しない。サーバから操作できない。がCookieと違うところ。

セッションストレージ

ブラウザを閉じると破棄される保存領域。

スカラな値に関してはkeyとvalueを指定すれば簡単に保存できる。

sessionStorage.setItem('key', 'value');

取り出し

sessionStorage.getItem('key')

削除

sessionStorage.removeItem('key')

全削除

sessionStorage.clear()

ローカルストレージ

ブラウザを閉じても残される保存領域。

ブラウザによって異なるようだがブラウザの設定から履歴やCookieを削除すると破棄される。ので開発者が意図して永続的にデータを残すといったことは不可能。

 localStorage.setItem("key", "value");

取り出し

var str = localStorage.getItem("key");

削除

localStorage.removeItem("keyName")

全削除

localStorage.clear()

配列、オブジェクトの保存・取り出し

配列、オブジェクトはJSON文字列にして保存すればよい。

配列をJSONにして保存。オブジェクトも同様。

localStorage.setItem("key", JSON.stringify([1,2,3,4]));

デコード

var jsonData = localStorage.getItem("key");
var arrayData = JSON.parse(jsonData);