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

Follow me!

前の記事

Vue Nuxt.js Store

次の記事

Docker https-portal