JavaScript Console

JavaScript コンソール ホーム目次

ストレージ - WebStorage

　HTML5 をサポートしているブラウザでは、ブラウザでのデータ保存機能が利用でき、WebStorage と呼ばれています。
データ保存機能は、キーと文字列(データ)のペアで利用します。つまり、データ保存するときはキーと文字列を指定し、データ取得や削除するときはキーを指定します。

データ保存域

　WebStorage には、セッション単位で利用する sessionStorage と、永続的に利用する localStorage の２種類があります。 sessionStorage を利用するには、window.sessionStorage を、localStorage を利用するには、window.localStorage を使います。

sessionStorage は、ブラウザで開いているときのみ有効で、ウィンドウを閉じたり、他のタブで保存したデータを利用することはできません。
localStorage は、ブラウザを閉じても有効で、再度アクセスされたり、他のタブでも保存したデータを利用することができます。

また、WebStorage は、生成元(オリジン)、つまり、プロトコル＋ドメイン＋ポート番号　毎に別々の領域を利用するので、他の生成元のデータを利用することはできません。

データ保存

　データの保存には、キーと文字列を指定して、setItem 関数を呼び出します。

//var storage = window.localStorage;
var storage = window.sessionStorage;
storage.setItem('kagi', 'atai');
console.log('setItem');

データ一覧

　データキーの一覧は、以下のように、webStorage で保存されているデータの個数(length)分、key 関数を呼び出します。

//var storage = window.localStorage;
var storage = window.sessionStorage;
for(var i = 0; i < storage.length; ++ i) {
  var key = storage.key(i);
  console.log(key);
}

データ取得

　データの取得には、キーを指定して、getItem 関数を呼び出します。

//var storage = window.localStorage;
var storage = window.sessionStorage;
for(var i = 0; i < storage.length; ++ i) {
  var key = storage.key(i);
  var value = storage.getItem(key);
  console.log(key + ' : ' + value);
}

データ削除

　データの削除には、キーを指定して、removeItem 関数を呼び出します。

//var storage = window.localStorage;
var storage = window.sessionStorage;
if(storage.length > 0) {
  var key = storage.key(0);
  storage.removeItem(key);
  console.log('Remove : ' + key);
}

全データ削除

　全データの削除には、clear 関数を呼び出します。

//var storage = window.localStorage;
var storage = window.sessionStorage;
storage.clear();

目次へ