WebStorage 入門

概要

Electronやハイブリットアプリ開発の際に、ローカルにデータを持たしたいと思い再入門しました。
ざっくりいうと、WebStorageとはブラウザにデータを保存しておく為の仕組みです。
Cookieよりも高機能です。(永続的なデータ保存・ストレージ容量が4MB)

注意点

ブラウザにより使えない場合がある。
最新のブラウザなら基本なんでも大丈夫です。
(IE8以上なら大丈夫。)

ルール

同一オリジンでデータを保存します。

オリジンとは

URLっぽいものの事。

http://(スキーム)localhost(ホスト):8000(ポート) = オリジン

同じ端末(ブラウザ)で同じオリジンなら同じWebStorageが使える。

WebStorageの種類

sessionStorage

タブが閉じられるまで有効。
タブが複数でも異なるStorageになる。

keyとvalueで保存される。

メソッド

Method	Description
sessionStorage.setItem(key, value)	sessionStorageにデータを保存する。
sessionStorage.getItem(key)	sessionStorageのデータを取得する。
sessionStorage.removeItem(key)	sessionStorageのデータを削除する。
sessionStorage.clear()	sessionStorageのデータを全件削除する。
sessionStorage.length	sessionStorageのkey数を返す。

localStorage

ブラウザ自体にずっと保存。
複数タブでも有効。
(基本localStorageを使うのがベターです。)

Method	Description
localStorage.setItem(key, value)	localStorageにデータを保存する。
localStorage.getItem(key)	localStorageのデータを取得する。
localStorage.removeItem(key)	localStorageのデータを削除する。
localStorage.clear()	localStorageのデータを全件削除する。
localStorage.length	localStorageのkey数を返す。

オブジェクトを保存する

key, valueのvalueをオブジェクトにしたい事があるかと思います。
その際は、JSON.stringify(value)とJSON.parse(key)を使います。

setItem時

JSON.stringify(value)

getItem時

JSON.parse(key)

イベント

複数タブなどを開いている場合に、データの整合性を取るイベントがあります。
storageに何らかの変更があったらイベントをキャッチします。

  localStorage.setItem('name', 'jack');
  window.addEventListener('storage', (e) => {
    console.log(e.key); // key
    console.log(e.oldValue); //古い値
    console.log(e.newValue); //変更後の値
    console.log(e.storageArea); //変化があった時の、storageのデータ全体をオブジェクトで取得
    console.log(e.url); //オリジン
  });

終わり

WebStorageを使えば、簡単に端末(ブラウザ)毎にデータを残す事ができます。
てっとり早くデータを保存したい時や、ローカル端末にデータを残したい時などにはうってつけです。
セキュリティ的な観点では、もう少し調査が必要なので、次回はそちらの調査結果を書こうと思います。