HTML5のWebストレージについて

HTML5の大きな特徴の一つ、Webストレージについて。

Breaking Out The Edges of The Browser (24WAYS)より、
前半部分のWebストレージについて訳してみました。
間違ってたらすみません！

Webストレージとは

クライアント側にデータを蓄えられる仕組み。
(※ちなみに、似たような機能であるクッキーとの違いは以下に書かれています。
W3C - 『Web Storage』日本語訳 (HTML5.JP))

ドメイン毎に5Mバイト程度のデータを扱える
(ただしこれは推奨なので、実際扱える量は各ブラウザに任される)

Storage supports around 5Mb of data per domain
(the spec’s recommendation, but it’s open to the browsers
to implement anything they like)

Webストレージは2種類ある

1. セッションストレージ
   ウィンドウが開いている間、同一ドメイン上で利用可能。
2. ローカルストレージ
   手動で消去するまで、同一ドメイン上で利用可能。

メジャーブラウザの対応状況

1. 全て対応: Internet Explorer, Firefox, Safari(PC、ケータイ、iPhone)
2. 一部: Google Chrome (ローカルストレージのみサポート)
3. サポートしていない: Opera (10.10)

APIのインターフェース

セッションストレージもローカルストレージも同一のインターフェースが提供されている。

1. setItem(key, value)
2. getItem(key)
3. key(index)
4. removeItem(key)
5. clear()

例えば以下のように記述する。

localStorage.setItem('name', 'windblue');

alert( localStorage.getItem('name') );

データへのアクセス方法は色々あるよ

例えば、

localStorage.name = "windblue";

としたとき、次のようにnameプロパティにアクセスできる。

1. localStorage.name
2. localStorage.getItem(localStorage.key(0))

※keyプロパティはゼロベース。

今は文字列しか格納できない

数値も文字列に変換されて格納される。

Currently all browsers only support storing strings.
This also means if you store a numeric, it will get converted to a string.

Objectも同様に文字列に型変換されてストレージに格納される。
Objectを扱いたいときは、ストレージから取ってきた後に、
JSONパーサで文字列→Objectの変換をすればいい。