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

  関連記事

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

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

no image
要素を追加する 

最近やたらとjQueryに頼って生きてます。jQueryだと要素の追加が簡単だが …

【html5】videoタグで背景に動画を再生させる方法とは!?

動画を背景で再生させるとサイトがダイナミックになりますよね♪ 例えば下記のような …

html5のvideoで動画を再生してみた!!

動画を撮れるアプリでも・・て思った矢先に思いついたのがhtml5で追加されたvi …

javascriptのプロトタイプを調べる

前回、javascriptのクラスについて軽く書いたが今回は、prototype …

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

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

【jQuery】スクロールしてヘッダーやナビを上部に固定するには?

スマホサイトのリニューアルでスクロールしたらヘッダーが上部に固定させるようにした …

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

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

【jQuery】TOPへ戻るボタンでスクロールさせる!!

ブログとか縦に長いサイトだとよくスクロールしていくとフワッと「ページトップへ」と …

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

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