改訂第5版 JavaScript ポケットリファレンス (古籏一浩著)を元に練習。
最大容量は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);
ブラウザがローカルストレージ内に保持している全てのキー名とデータを表示します。