WebStorageをやってみた

WebStorageをやってみた昨日の温泉のみで教えてもらったWebStorageを早速やってみました！（今日の作業の助走も兼ねて）せっかくなのでGithub Pageで動作確認をしています。今回もドットインストールです。

利用できるか確認

typeof(Storage)がundefinedだったら利用できない。

if (typeof(Storage) === "undefined") {
    alert("Web Storage Not Supported");
}

同一オリジンでデータを保存

http://192.168.38.10:8000/index.htmlだったとしたら、http://192.168.38.10:8000/以下のデータを保存して利用できる。

種類

• sessionStorage: タブが閉じられるまで有効
• localStorage: ブラウザ自体にずっと保存される。

保存と呼び出し

保存

sessionStorage.setItem(‘key’, ‘value’);

呼び出し

sessionStorage.getItem(‘key’);

sessionStorage.setItem('name', 'morizotter');
sessionStorage.getItem('name');                 # => morizotter

削除

一つだけ削除

sessionStorage.removeItem(‘key’);

全削除

seccionStorage.clrer();

sessionStorage.removeItem('name');
ss.clear();

その他の処理

すべての値を取得する

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

JSON

• JSON.stringify: JSONを文字列に変換
• JSON.parse: 文字列をJSONに変換

var ls = localStorage;

var user = {
    name: 'morizotter',
    score: 80
}

ls.setItem('user', JSON.stringify(user));
console.dir(JSON.parse(ls.getItem('user')));

イベント

addEventListenerを記述しておくことにより変更を検知することができる。

var ls = localStorage;
ls.setItem('name', 'morizotter');

window.addEventListener('storage', function(e) {
    // e.key
    // e.oldValue
    // e.storageArea
    // e.url
    console.log(e.key + ':' + e.oldValue + '->' + e.newValue);
});

参考

• Web Storage入門 (全8回) - プログラミングならドットインストール