はしくれエンジニアもどきのメモ

情報・Web系技術・Englishの勉強メモ・備忘録です。

HTML5 WebStorage まとめ

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 を見る限り、 現時点() では、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」から確認できる。

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

配列的処理

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

WebExtensionsの場合

拡張機能開発の場合でもWebStorageは利用できる。 が、WebExtensionsではchrome.storage を扱える。 容量制限の解除もできるようです。 拡張機能を開発する場合は、こちらを使ったほうがいいかも。

広告を非表示にする