ドットインストールです。
昨日の温泉のみで教えてもらった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); });