WebStorageの練習

改訂第5版 JavaScript ポケットリファレンス (古籏一浩著)を元に練習。

WebStorageの概要

最大容量は5MB。
ブラウザの対応は、IE 8、Firefox 3.6、Safari 5、Google Chrome 8以降で使用可能。

ローカルストレージは、ブラウザ内に期限なく保存され、ドメイン内(ポート番号毎のオリジン単位で保存)で共有することが可能。

セッションストレージは、ウィンドウまたはタブ内でのみ有効。それらを閉じると抹消される。

ストレージの状況

ローカルストレージやセッションストレージが使用可能かどうか調べます。

ローカルストレージは使えません / セッションストレージは使えません

if (window.localStorage) {
document.getElementById("result1").innerHTML = "ローカルストレージは使えます";
}
if (window.sessionStorage) {
document.getElementById("result2").innerHTML = "セッションストレージは使えます";
}

データの書き込み

ローカルストレージやセッションストレージにデータを書き込みます。

localStrage.setItem(key, value)

function dataSave() {
var s = document.getElementById("textfield1").value;
localStorage.setItem("myData", s); //保存されるデータ
localStorage.setItem("saveDate", new Date()); //保存時の時刻
}

データの読み込み

ローカルストレージやセッションストレージからデータを読み込みます。

value = localStrage.getItem(key)

function dataLoad() {
var s = localStorage.getItem("myData"); //データ読み込み
var t = localStorage.getItem("saveDate"); //時刻の読み込み
document.getElementById("textfield2").value = s + " / " + t;
}

localStorage.[key] または localStorage.key としても読み込みが可能です。

データ保存数

ローカルストレージやセッションストレージに保存されたデータの数を調べます。

localStorage.length sessionStorage.length

function dataLength() {
var n = localStorage.length;
document.getElementById("textfield3").value = n;
var n = sessionStorage.length;
document.getElementById("textfield4").value = n;
}

キー名を調べる

ローカルストレージやセッションストレージに保存したデータのキー名を取得します。

localStorage.key(n) (n = 0)

function dataKey(n) {
var s = localStorage.key(n);
document.getElementById("textfield5").value = s;
}

データの削除

ローカルストレジやセッションストレージのデータを削除します。

localStorage.removeItem(key) (key = "myData")

localStorage.clear()

ストレージイベントを検知

ストレージが書き換えられたことを検知します。(IE9以降のみ対応?IE10で動作せず)

検知内容 →

window.addEventListener("storage", function(evt){
var key = evt.key; //変更されたキー名
var oldVal = evt.oldValue; //変更前の値
var newVal = evt.newValue; //変更後の値
var url = evt.url; //イベント発生元のURL
var sa = evt.storageArea;
document.getElementById("result3").innerHTML = key + " / " + url + " / " + sa;
}, false);

全てのキー名とデータを表示

ブラウザがローカルストレージ内に保持している全てのキー名とデータを表示します。

戻る