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】配列をシャッフルして要素をランダムに入れ替える方法

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

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

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

【JavaScript】bodyに要素を追加

そういえばbody要素直下にデータを追加したい場合っていまさらながらメモる。 i …

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

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

読み込んだjsonファイルをjqueryでフィルタリング処理の練習

jsonファイルで、読み込んだ画像リストを表示するのは、まぁそんな難しくないけど …

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

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

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

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

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

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

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

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

【JavaScript】送信ボタンのイベントをキャンセルさせる方法とは!?

フォームのsubmitボタンでクリックすると情報が送信されますが、その前に入力し …