Web Storage #JavaScript

Web Storageとは

JSで扱うデータを手軽に永続化させるためのインターフェース
Key-Value型のシンプルなストレージ
通常のJSオブジェクトと同様の操作で読み書きが可能
（Cookieと比べ）大容量のデータを保存可能。しかしインデックス作成やトランザクション処理は不可。

また注意点として

大凡の目安で、保存可能の上限は５M
オリジンごとに共有のストレージが用意されるため注意。サービスが異なってもオリジンが同じであれば意味はない。

sessionStorageとlocalStorage

WebStorageの実態はグローバルオブジェクトに定義されたsessionStorageとlocalStorageという２つのオブジェクトである。
これらは通常のオブジェクトと同じように、ページ遷移してもプロパティは保存される。

sessionStorageとlocalStorageの違い

	localStorage	sessionStorage
共有される場合	ブラウザやPCの再起動でも生存し続ける。	通常のページ遷移や、リロード、iframeの子ページ、クラッシュからの復元など。
共有されない場合	明示的に削除した場合	新規ウィンドウや、新規タブ。ウィンドウを閉じて新しく開き直した場合のみ。

基本操作

データの読み書き (setItem,getItem)
データの削除 (removeItem)
データの列挙 (key,length)
storageイベントについて

データの読み書き

//読み書き
localStorage.setItem('key', 'foo');
let data = localStorage.getItem('key');

//JSと同様のアクセスが可能
localStorage.key = 'foo';
let data = localStorage.key;

//オブジェクトの読み書き
const obj = {x:1, y:2};

//オブジェクトをJSON文字列に変換して保存する
localStorage.key = JSON.stringify(obj);

//保存されたJSON文字列をオブジェクトに復元
const obj2 = JSON.parse(localStorage.key);

データの削除

//読み書き
localStorage.removeItem('key');

delete localStorage.key;

データの列挙

//保存されたデータを列挙
for (let i = 0; i < localStorage.length ; i++) {
  let key = localStorage.key(i);
  let value = localStorage[key];

  console.log(key, value);
}

storageオブジェクトの利用

window.addEventListener('storage', function(e) {
  if(event.key === 'userid') {
    const msg = 'こんにちは' + event.newValue; //更新後の値を取得するプロパティ
    document.getElementById('msg').textContent = msg;
  }
}, false);

ネームスペースの管理

ローカルストレージのでデータは明示的に削除しない限りリセットされないため、ローカル変数の感覚でセットしすぎると管理が困難になる。そのためネームスペースを利用しする。

let SERVICE_NAME = 'SERVICE_NAME';
let storage = null;

window.onload = function() {
  try {
    storage = JSON.parse(localStorage[SERVICE_NAME] || {});
  }catch ( e ) {
    storage = {};
  }
};

//画面を閉じるときにstorageを保存
window.onbeforeunload = function() {
  localStorage[SERVICE_NAME] = JSON.stringify(storage);
}

Cookieの利用

これまでブラウザにデータを保存する方法はCookieを利用していた。
しかし、Cookieには以下の問題点がある

容量制限が4KBと少ない
サーバーへリクエストするたびにCookieが一緒に送られる
セッション情報などの重要な情報が格納されている事が多い

Cookieの利用法

データのセット
データの削除
データの取得
有効期限を設定

//セット
document.cookie = 'hello';

//削除
document.cookie = 'hello; max-age=0';

//取得
const data = document.cookie.split(';');
data.forEach(function(value) {
  console.log(value);
}) 

//有効期限
document.cookie = 'hello; max-age=180'; //3分

//GMTで有効期限を設定
const count = new Date();
document.cookie = 'hello; expires=' + (Date.now() + 3600000).toUTCString;