HTML5 WebStorage まとめ

WebStorage(sessionStorage、localStorage) についてまとめておきます。

試したブラウザ環境

動作に試したバージョンを以下にに書いておく。

Chrome 46.0.2490.86 m (64-bit)
XAMPP 5.6.12 (同一オリジンに保存されるためローカルサーバが必要)

WebStorage とは

Web(DOM) Storage の仕組みを利用すると、ブラウザのみで、文字列のキーと値のペアを安全に保存し、後で取り出して使用することが可能になる。

cookie より大容量に保存できる。

ストレージの最大容量

ここで調べられる。

Web Storage Support Test

実装によって、SessionStorage, LocalStorage で容量がばらばらのようだが、基本5[MB]あると思っていて良さそう。

調べておいたものを以下ににまとめておく。

ブラウザ	localStorage[characters]	sessionStorage[characters]
Chrome 46.0.2490	5101 k	5101 k
Firefox 44.0	5101 k	5101 k
IE 11	4864 k	4864 k

対応ブラウザ

Can i use を見る限り、現時点（2015年11月16日）では、Opera mini 以外のブラウザでは問題なく使えるようです。

Can I use... Support tables for HTML5, CSS3, etc

WebStorage が対応しているかの判定コード

Storage オブジェクトを型判定で判定できる。


if (typeof(Storage) === undefined)
  alert('not support');
}else{
  console.log('Supported');
  console.log(Storage);
}

WebStorage の種類

WebStorage は2種類あるが、共通項として同一オリジン（ホスト＋ポート）でデータを保存する。

sessionStorage

保存したデータは、タブを閉じるまで有効となる。同じページを別のタブで開くと保存したデータは別物（独立）となる。

sessionStorage の取得は以下。


var ss = sessionStorage;

localStorage

タブを閉じたとしても、ブラウザ自体にずっと保存される。同じページを別のタブで開くと保存したデータも、同じなので連携ができる（書き換えると一方も反映される）。

localStorage の取得は以下。


var ls = localStorage;

データの保存とロード

データの保存は、setItem() を使う。

データのロードは、getItem() を使う。

sessionStorage の例：


var ss = sessionStorage;
ss.setItem('name', 'cartman');
console.log(ss.getItem('name')); // cartman

localStorage の例（sessionStorageのときと同じ。）


var ls = localStorage;
ls.setItem('name', 'cartman');
console.log(ls.getItem('name')); // cartman

WebStorage上のデータの削除

.remove('key'); で、そのkey を持つデータを削除。

.clear(); で、すべて（同一オリジン上）のデータを削除。


var ls = localStorage;
ls.setItem('name0', 'cartman');
ls.setItem('name1', 'kile');

ls.remove('name1'); // {"name1": "kile"} のデータのみ削除
ls.clear(); // 全て削除

ブラウザからWebStorage のデータを確認

ブラウザのdev tool からWebStorage のデータを確認、変更、削除もできる。

Chrome の場合、「Resources」タブの「Local Storages」または「Session Storages」から確認できる。

配列的処理

Storageは配列ではないので、 Storage[0] ではアクセスできない。が、.key(0) でアクセスすることができる。


var ls = localStorage;
ls.setItem('name0', 'cartman');
ls.setItem('name1', 'kile');

for (var i = 0; i < ls.length; i++) {
console.log(ls.key(i) + ' ' + ls.getItem(ls.key(i)));
}

また、Object.keys で、 key値の配列を返すので、それにforEach で処理もできる。


var ls = localStorage;
ls.setItem('name0', 'cartman');
ls.setItem('name1', 'kile');

Object.keys(ls).forEach(function(k){
  var val = this[k];
  console.log(k + ' ' + val);
});

Objectデータの保存とロード

Objectデータを保存する場合、 JSON.stringify() を使って文字列化して保存する。

ロードする場合は、JSON.parse() を使って文字列からJSONに戻せる。


var ls = localStorage;
var user = {
  "name": "cartman",
  "score": 100
};
ls.setItem('user', JSON.stringify(user));
console.log(JSON.parse(ls.getItem('user'))); // {"name": "cartman", "score": 100}

WebStorageのイベント

WebStorage が変更されたことは、 storageイベントでわかる。

.key

変更された値のkey値
.oldValue

変更される前の値
.newValue

変更した後の値
.url

値が変わったときのdocumentのアドレス
.storageArea

Storage Object自体を返す。

サンプルコード。


window.addEventListener('storage', function(event){
  console.log(event);
  console.log('event.key: ', event.key);
  console.log('event.oldValue', event.oldValue);
  console.log('event.newValue', event.newValue);
  console.log('event.url', event.url);
  console.log('event.storageArea', event.storageArea);
});

参考：https://developer.mozilla.org/en-US/docs/Web/Events/storage