Storage Test

Web Storageサンプル

Web Storageはクライアントにkey-valueペアのデータを保存するための機能です。cookieとよく似ていますが、「永続的にデータを持たせられる」「大容量のデータを保存できる」という特徴があります。 Web StorageにはLocal StorageとSession Storageの2種類あります。 Local Storageは永続的にデータを保持できるのに対し、Session Storageはセッションスコープでデータを保持します。 Session Storageはブラウザを閉じるとデータが消えます。

標準のWeb Strorage APIでは今現在では文字列しか保存することができません。オブジェクトをJSON型に変換して格納することはできますが、Date型やRegExp(正規表現)型などはその型を維持したまま保存して取り出すことができません。

hifiveのAPIを使うことで、型を保持したまま追加して取り出すことができます。使用可能な型はh5.api.storage.local#setItem(APIドキュメント)をご覧ください。 h5.api.storageのチェックを外すと、APIを使わずに追加/取得する挙動を確認できます。

削除するキー:

Local Storage Session Storage
h5.api.storage

文字列

キー:

値:

オブジェクト

キー:

sampleObj = {
	str: 'test',
	num: 10
}

配列

キー:

[1, "two", 3]

Date型

キー:

new Date()

正規表現

キー:

値：new RegExp('')

すべて削除

Storage

値を取得ボタンをクリックしてから以下のボタンで挙動を確認できます。
Date型用正規表現用

ストレージを再取得します。APIの使用/不使用が反映されます。