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】子ウィンドウ/親ウィンドウのお互いの要素を操作するには!?

以前、iframe内から親ウィンドウの要素を操作する記事を書きました。 ifra …

no image
要素を追加する 

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

html5でドラッグ&ドロップの処理

ドラッグ&ドロップって昔から使われてたらしいけど、とりあえず知っておこうと思って …

【jQuery】ajaxで読み込み中にローディングの実装するにはどうしたらいいのか調べてみた

ajaxでリクエスト処理中のローディングについて調べてみた。

【JavaScript】配列の要素を並び替える(数値の大きい順)

ある案件で配列で、配列要素を数値の大きい順に並び替えたいことがあったので、そいつ …

html5でドラッグ&ドロップでローカルからテキストファイルをアップロード

先日、ファイルの読み込みをやりましたが、今度はローカルからファイルを読み込む方法 …

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

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

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

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

HTML5のWeb Workersで並列処理を使いこなしてみよう!

近年は、html5の台頭によって「html5+css+javascript」によ …

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

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