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

html5

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

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

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

localStorageを使った実際のコード

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

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

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

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

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

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

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

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

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

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