ほぼ日刊サービス開発日誌

React, firebase, 機械学習など

sponsored

LocalStorageがcookieより便利な件

f:id:serendipity4u:20170417172047p:plain

LocalStorageは javascriptを用いてクライアント側にデータをKey-Value型で保存する仕組みです. cookieの弱いところを克服して使いやすくもなった, 技術的後継という位置づけらしいです(*1). cookie のようにすべてのリクエストに対してデータを自動で送信しないので, cookie よりはセキュアに利用できます.

ユーザのローカル(ブラウザ)にデータを保存することができるので, 半永久的にデータを保持することができます. 保存は「ドメイン:ポート番号」の組み合わせの「オリジン」単位です. Amazonの「最近見た商品」などでこの機能が利用されています.

セッションとはライフサイクルが異なり, ブラウザを閉じても持続し, 最近のブラウザはモバイルを含めほとんど利用できます.

消さなければずっと残るので明示的に消してあげます.

// 格納
window.localStorage.setItem(['キー名'],['値']);

// 数の取得
window.localStorage.length

// 値の取得
value = window.localStorage.getItem(['キー名']);
console.log(value); 

// 指定したストレージの削除
window.localStorage.removeItem(['キー名']);

// localStorageを初期化
localStorage.clear();
window.localStorage.clear();

chrome developper tool でやってみる. stackoverflowを開いて、あるタブでセット.

f:id:serendipity4u:20170814142114p:plain

別のタブでもstackoverflowを開いて、表示.

f:id:serendipity4u:20170814142124p:plain

おわかりだろうか. タブが違ってもデータが共有されている(同じstackoverflowというサイトを開いているので). メソッドが直感的だし, 便利ですね.

*1

正確には, LocalStorage と SessionStorageという2種のストレージを持つ, WebStorage自体がcookieの技術的後継.

http://image.itmedia.co.jp/ait/articles/1108/12/ap-introhtml5_02_01.gif

www.atmarkit.co.jp