html5のwebStorage(localStorage)でデータを保存する

html5

さて最近、html5が当たり前になってきましたね♪それに伴って新しい機能が追加された訳なんですが、その中でもローカル環境にデータを保存するための機能があったのでそれについて調べてみました。

webStorageとは

主に二つの種類があるみたいですね~。ひとつはlocalStorageともうひとつはsessionStorageです。

  • sessionStorage : セッションで管理してるのでブラウザを閉じるとデータが消える。
  • localStorage : ブラウザで永久的に保存できるのでブラウザを閉じても保存されている。

ふたつの違いの細かい話については「ブラウザでストレージ? Web Storageを使いこなそう」に詳しく書いてあります。

さて、この機能なんですが先ほども説明したようにユーザーが使っているブラウザにデータの保存や追加・削除といったことがJavaScriptで可能となりました。
若干、クッキーにも似ていますが保存できるデータ量も違いますし、localStorageもsessionStorageも基本的には、キー(key)と値(value)をセットとして扱うためデータの管理がし易いと思います。

localStorageが使えるかどうかの判別

すべてのブラウザで使えるようであればこの判別するような処理は必要ないのですが、まだまだ使えるブラウザだったり使えないブラウザだったり統一されていないので、使えるブラウザかどうかを判別るす必要があります。

上記はあくまでサンプルですが、if文の条件式に「localStorage」を指定すれば判別できます。

フォームに入力されたデータを保存してみる

フォームのテキストエリアに入力されたデータをサンプルを作ってみた。重要なところだと思う部分だけ説明を書いていく。

①localStorageにデータを保存する

localStrorageにデータを保存するには「setItem()」メソッドを利用する。
第1引数にはキー(Key)と第2引数には値(Value:バリュー)を入力する。
ほかにも「setItem()」を使用しない方法もある。*下記参照

②localStorageからデータを取り出す

localStrorageにデータを保存するには「getItem()」メソッドを利用する。
引数にはsetItemで指定したキー(Key)を指定する。
ほかにも「getItem()」を使用しない方法もある。*下記参照

③保存データを全部削除する場合

保存したデータを全部削除したい場合は「localStorage.claer()」メソッドを使用する。
キー(Key)ごとに削除したい場合は、「removeItem()」メソッドを使用して引数に削除したいキー(key)を指定する。

サンプルデータ

これで、とりあえず保存と表示はできましたが、これだと1つのデータだけです。複数のデータを登録する方法は下記の記事より。