Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

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

      2015/08/04

さて最近、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つのデータだけです。複数のデータを登録する方法は下記の記事より。



 - html5, javascript , ,

     

Message

  関連記事

html5のlocalStorageで複数のデータを保存するには?

以前、localStorageのデータを保存する方法について記事を書きましたが、 …

【JavaScript】読み込み処理でプログレスバーをアニメーションさせてみた!!

先日、CSSによるローディングバーのぐるぐるしたアニメーションに記事を書きました …

PostMessageを使ったクロスドメイン通信によるメッセージの送受信を試してみた!

JavaScriptでいろいろ実装していると時に別ウィンドウを開いて、呼び出し元 …

JavaScriptで動画コンテンツを操作してみた!

前回、html5のvideoタグについて説明しました。 html5のvideoで …

【javascript】剰余(%)演算子を使って値が繰り返しループする処理をやってみた!

ちょっとプログラムで、配列の長さの値の範囲内で繰り返す値をどうすればいいのか検証 …

iframe 内のウィンドウから親ウィンドウの要素を操作するには!?

さて、ちょっと気になっていたiframeで読み込んだhtmlで実行したJavaS …

IE6・7・8でもHTML5のvideoを利用できる方法とは!?

さて、html5のvideoタグを利用して動画を再生させるのは簡単なんですが、た …

【javascript】マウスホイールで減速するイージングを試してみた

マウスホイールで減速するイージングを試してみた ちょっとjavascriptとj …

javascriptのプロトタイプを調べる -クラス編-

最近、jqueryに慣れまくってjavascriptでオブジェクト指向について調 …

【JavaScript】配列をシャッフルして要素をランダムに入れ替える方法

JavaScriptで配列をシャッフルしてその要素をランダムに表示させるにはどう …