「html5」タグアーカイブ
html5 の webStorage(localStorage)のテスト
html5 の機能で、ローカル環境にデータを保存するための機能 localStorage を試す。
ブラウザで永久的に保存できるのでブラウザを閉じても値は保存される。
このページも頑張れば備忘録とかTODOリストとして使えるかもしれない(^^;
キー(初期値はkey1)と値を紐づけて保存。
キーと紐づく値を読み出してポップアップ表示。
全ローカルストレージのクリア。
※ 入力された情報はサーバには送られません。
具体的な使い方
localStorage が使えるかどうか
1 2 3 4 5 |
if (window.localStorage) { alert('localStorage は使える。'); } else { alert('localStorage は使えない。'); } |
関数 | 機能 |
---|---|
localStorage.setItem(key, value); | key と value をペアにして保存 |
localStorage.getItem(key); | key に対応する値を取得 |
localStorage.removeItem(key); | key に対応する値を削除 |
localStorage.clear(); | 全データを消去 |
localStorage.length | 格納された数を取得 |
localStorage.key(index); | index番目のキーを取得 |
Chrome なら 要素を検証 → Resources → Local Storage で保存内容を確認できる。