Firefox 3を使ってsessionStorageを試す

杉山貴章(オングス)
2008-12-05 08:00:00
  • このエントリーをはてなブックマークに追加
最新特集【一覧】

sessionStoregeでフォームの入力を記憶

 今回は、フォームからの入力内容をsessionStorageを利用して記憶する例を紹介する。リスト1は、ユーザ名を入力するためのテキストフィールドを1つだけ持つページのソースコードである。ページを表示する際にはsessionStorageにユーザ名が記録されているかどうかを確認し、もし記録があればそれを表示するようになっている。また、ユーザ名を入力して[名前を記憶]ボタンを押すせば入力された名前がsessionStorageに記録される。

リスト1 sessionStorageを利用するウェブページの例


  
  
    
    sessionStorageの使用例
    
  

  

    

sessionStorageの使用例

ユーザ名:

 Firefox 3でアクセスすると図1のように表示される。ここでユーザ名を入力して[名前を記憶]ボタンを押せばsessionStorageに入力されたユーザ名を保存し、ページがリロードされた図2のような表示になる。

図1 最初にアクセスしたときにはフォームは空になっている 図1 最初にアクセスしたときにはフォームは空になっている
図2 sessionStorageにユーザ名が記憶され、次のアクセス時に呼び出される 図2 sessionStorageにユーザ名が記憶され、次のアクセス時に呼び出される

 この状態でウィンドウ(タブ)を閉じないで他のサイトに移動し、再度アクセスした場合でも、sessionStorageにはユーザ名が保存されたままなので図2と同じ表示になるはずだ。sessionStorageなので、ウィンドウを閉じたり他のタブでアクセスした場合には保存されたデータは有効にならず、元の表示に戻る。[名前を削除]ボタンで、保存されたユーザ名が削除される。

 こうして見ると実にシンプルな機能と言えるが、それ故に様々な場面での利用が考えられるだろう。

  • 新着記事
  • 特集
  • ブログ