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

html5

以前、localStorageのデータを保存する方法について記事を書きましたが、localStorageが保存できるデータは一つではなく複数のデータを保存する事もできます。

で、前回はキーに対してデータを一つだけ保存したのですが、今回は複数のデータを保存する方法として複数のデータをJSONデータとして扱えば可能になります。その方法を今回は紹介してみたいと思います。

前回のlocalStorageに保存する方法などはこちら「html5のwebStorage(localStorage)でデータを保存する」を参照してください。

localStorageを使った実際のコード

下記のプログラムは分かりやすくするために省略している。

//保存する処理
savebtn.addEventListener("click", function() {
    //入力されたデータを取得
    var t = document.getElementById("title").value;
    var n = document.getElementById("naiyou").value;

    //①データをオブジェクト保存する
    var datalist = {
        title: t,
        naiyou: n
    }
    //②JSONデータに変換して登録する
    window.localStorage.setItem("setdata", JSON.stringify(datalist));
    
    //データを表示
　　display();
}

//表示する処理
function display() {
    //③JSONデータに戻してから取得する
    var d = JSON.parse(window.localStorage.getItem("setdata"));
    alert(d.title);
    alert(d.naiyou);
};

①データをオブジェクト保存する

データをjavascriptオブジェクトで保存する。そうすると下記のようにアクセスできる

datalist.title;
datalist.naiyou;

これをそのままlocalStorageのsetItemの第2引数に渡せばいいのかと思っていたのだが、これだと表示されなくなってしまった。

調べてみると、現時点ではlocalStorageに保存できるデータは文字列だけみたい。＊下記のページを参照。
「Web Storageにおける注意点」

②JSONデータに変換して登録する

そこで対策として一旦オブジェクトをJSON文字列に変換するという方法。
これは「JSON.stringify」というメソッドがあるのでそいつの引数に指定すればいい。

//JSON文字列に変換する
window.localStorage.setItem("setdata", JSON.stringify(datalist));

②JSONデータに戻してから取得する

データを取得するには、JSON.parseメソッドを使用してJSON文字列をJavaScriptオブジェクトに戻す必要がある。オブジェクトに戻した後は今まで通り「.」でアクセスできるようになる。

//JSON文字列からjavascriptオブジェクトに戻してから取得する
var d = JSON.parse(window.localStorage.getItem("setdata"));

//元に戻した後は今まで通りアクセスできる。
d.title;
d.naiyou;

下記にサンプルプログラム