JavaScript WebStorage

WebStorageとは

WEB上のアプリへのアクセスの際、ブラウザにデータを保存する機能
html5で使用できるクッキーの後継機能

クッキーとの違い

storage種類	容量	サーバへのデータ送信
WebStorage	5MB	データを利用する場合のみ
クッキー	4KB	常に強制

種類

種類	機能
localStrage	同一オリジン内で有効 ブラウザ、ウィンドウ/タブが閉じても生存
sessionStrage	同一セッション内で有効 ウィンドウ/タブが閉じると消滅

オリジン
＝「ドメイン:ポート番号」の組み合わ
https://office-yone.com:80
https://office-yone.com:433
https://limited.office-yone.com:433
https://office-yone2.com:433
は別オリジン

localStorage

const KEY = ‘local’;
const setValue = {
　　’storage’: ‘local’,
　　’term’: ‘eternal’,
};

SET
window.localStorage.setItem(KEY, JSON.stringify(setValue));
JSオブジェクトを格納する場合はJSON変換が必

GET
const getValue = window.localStorage.getItem(KEY);
console.log(JSON.stringify(JSON.parse(getValue)));
→{storage: “local”, term: “eternal”}

REMOVE
window.localStorage.removeItem(KEY);
const removedValue = window.localStorage.getItem(KEY);
console.log(removedValue);
→null

sessionStorage

const KEY = ‘session’;
const setValue = {
　　’storage’: ‘session’,
　　’term’: ‘session’,
};

SET
window.sessionStorage.setItem(KEY, JSON.stringify(setValue));
JSオブジェクトを格納する場合はJSON変換が必

GET
const getValue = window.sessionStorage.getItem(KEY);
console.log(JSON.stringify(JSON.parse(getValue)));
→{storage: “session”, term: “session”}

REMOVE
window.sessionStorage.removeItem(KEY);
const removedValue = window.sessionStorage.getItem(KEY);
console.log(removedValue);
→null