[HTML5]Web Storageを試す(sessionStorage/localStorage)

ブラウザ使ったデータ保存の方法って、昔ながらのクッキーしか知らなかった。

今は、Web Storageという仕組みが使えるらしいので検証してみる。

1オリジン当たり5MBまで保存できるって・・・すげーな。

 

詳しい仕様の方は、こちらのサイトで勉強させて貰ってます。

ここでは自分の理解の為に試しに書いて検証していきます。

 

1.Web Storageには2種類あるらしい。
  • sessionStorage – 「ウィンドウを閉じるまで有効」
  • localStorage – 「永続的に有効」

それぞれの動きを確認していきましょう。

 

sessionStorage

   

検証内容

  1. テキスト入力して「セーブ」
  2. テキスト内容をさらに更新して「ロード」
  3. ⇒「セーブ」した時の内容が復元。
  4. F5でページリフレッシュして、「ロード」
  5. ⇒「セーブ」した時の内容が復元。
  6. 画面を閉じて、もっかい開いて「ロード」
  7. ⇒何もでない。

コード

 

localStorage

   

検証内容

  1. テキスト入力して「セーブ」
  2. テキスト内容をさらに更新して「ロード」
  3. ⇒「セーブ」した時の内容が復元。
  4. F5でページリフレッシュして、「ロード」
  5. ⇒「セーブ」した時の内容が復元。
  6. 画面を閉じて、もっかい開いて「ロード」
  7. ⇒「セーブ」した時の内容が復元。

コード

 

ナニコレ、全然簡単で便利で大容量ってすごいじゃない。
今後作るフォームにはどんどん使ってこう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です