Web Storage

• window.localStorage
• window.sessionStorage
• ブラウザに内臓されているストレージ.
• ブラウザ自身にデータを持たせることができる.
• ブラウザのキャッシュクリアで消去できる.
• Cookieと相互運用して, HTTPプロトコルのステートレス性をぶち壊す.

参考

種類と機能

特徴	ストレージ	クッキー
データ制限	5MB	4KB
データ期限	なし/タブ終了	あり(指定)
通信	しない	する

ストレージ

Local Storage

• ブラウザを閉じても残る
• JSでクリア or ブラウザキャッシュのクリア -> 削除できる
• 保存できる型はString型のみ

Session Storage

• ブラウザ/タブを閉じるとデータクリアされる
• 基本的にSession Storageを優先して使用することで, トラブルを最小化する.

メソッド

• *は, window.localStorageまたはwindow.sessionStorage

メソッド	機能
*.setItem(key, value)	キャッシュを保存
*.getItem(key)	キャッシュを取得
*.removeItem(key)	特定のキャッシュを削除
*.clear()	すべてのキャッシュを削除

JSONクラスの活用

• JSオブジェクト -> JSON.stringify() -> 保存
• 取得 -> JSON.parse() -> 使用

const storage = window.sessionStorage; // window.localStorage;
let jsObj = { ... };
storage.setItem('key', JSON.stringify(jsObj));
jsObj = JSON.parse(storage.getItem('key'));