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

html5

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

webStorageとは

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

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

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

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

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

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

	// localStorage対応判定
     if(window.localStorage) {
         alert('ローカルストレージに対応している');
     }else{
		alert('ローカルストレージに対応していない');
	 }
	 
     // sessionStorage対応判定
     if(window.sessionStorage) {
         alert('セッションストレージに対応している');
     }else{
		alert('セッションストレージに対応していない');
	 }

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

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

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

var res = document.getElementById("result"); //保存されたかどうかの確認
var savebtn = document.getElementById("save"); //保存ボタン
var readbtn = document.getElementById("read"); //読み出すボタン
var deletebtn = document.getElementById("delete");　//保存データを削除するボタン

var read_t = document.getElementById("read_title"); //保存したテキストを表示するpタグ
var read_h = document.getElementById("read_honbun"); //保存したテキストを表示するpタグ

//使っているブラウザウでlocalStorageが使えるかどうかチェックする
if (!window.localStorage) {
    res.innerHTML = "localstorageに対応してません。";
    return;
}

//データを保存する処理
savebtn.addEventListener("click", function() {
    var t = document.getElementById("title").value;
    var h = document.getElementById("honbun").value;
    
    //①localStorageにデータを保存する
    window.localStorage.setItem("title", t);
    window.localStorage.setItem("honbun", h);
    res.innerHTML = "内容を保存しました";
}, true);

//保存データを取り出す処理
readbtn.addEventListener("click", function() {
   
　　//②localStorageからデータを取り出す
    var t = window.localStorage.getItem("title");
    var h = window.localStorage.getItem("honbun");
    
     if(t==null|| h==null){
        res.innerHTML="データを入力してください";
        return;
    }
    //
    read_t.innerHTML=t;
    read_h.innerHTML=h;
}, true);

//データを削除する処理
deletebtn .addEventListener("click",function(){
    
　　//③保存データを全部削除する場合
    window.localStorage.clear();
    res.innerHTML="localStorageのデータを削除しました。";
},true);

①localStorageにデータを保存する

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

window.localStorage.setItem(key,value);
window.localStorage.キー="バリュー";
window.localStorage["キー"]="バリュー";

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

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

var data=window.localStorage.getItem(key);
var data=window.localStorage.キー;
var data=window.localStorage["キー"];

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

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

//全データを削除
window.localStorage.clear();

//キー（key）ごとに削除
window.localStorage.removeItem(key);

サンプルデータ

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

html5のlocalStorageで複数のデータを登録するには?