HTML5 4

ブロック崩し

Web Strage

Web Strageによって、ローカルにデータを保存しておくことができます。

Web Storage

最も簡単にデータを保存できる方法です。

ローカルストレージ

あるホストのページ全体からデータの保存・参照ができます。
複数のウインドウで共通のデータを保持できます。 ウインドウを閉じても、データが失われません。

セッションストレージ

あるセッションの間だけ保存・参照ができます。
ウインドウを閉じると、データが失われます。

Web SQL

SQLによるデータの保存ができます。

Indexed Database API

インデックスと、データの組によってデータを保存します。

ローカルストレージ

ローカルストレージは、外部変数localStorageを使用して保存するしくみです。
以下のメソッドを使用できます。

setItem(key, data)

keyをキーとして、dataを保存します。
setItem()メソッドに渡されるデータ(Javascriptのオブジェクト)は文字列になっって保存されます。

getItem(key)

キーがkeyであるデータを返します。
返されるデータは文字列になっています。

length()

localStorageに格納されたデータ数を返します。

removeItem(key)

キーがkeyであるデータを消去します。

clear()

localStorageに格納されたデータを全て消去します。

以下は、数値•文字列•配列をlocalStorageに保存•取得する例です。

localStorage.setItem("data1", 3);
localStorage.setItem("data2", "test");
var array = new Array(2);
array[0] = 1;
array[1] = 2;
localStorage.setItem("data3", array);

var d1 = localStorage.getItem(data1); // d1は'3'という文字列
var d2 = Number(d1) + 3; // d1を数値に変換して、3を加算する
var s1 = localStorage.getItem(data2); // 元々文字列のデータはそのままでOK
var t = localStorage.getItem(data3); // tは'1,2'という文字列になっている
var a = eval('new Array('+t+')'); // 文字列tを使って配列を定義
var a1 = a[0];
var a2 = a[1];