カテゴリー: Web Storage

複数データをオブジェクトにまとめて保存した場合
まとめてデータを読み出します
以下はソース
var load_str ~ localStorage.playerData;
//読み出したデータをオブジェクトに変換
var load_obj = JSON.parse(load_str);
//オブジェクトを変数に代入
var name = load_obj.name;
var hp = load_obj.hp;
var dress = load_obj.dress;
JSON.stringy() でJSON文字列にして保存した
データを
JavaScriptオブジェクトに復元するには
JSON.parse() を津かいます
JSON文字列では、
数値や文字列などの型情報は保存されているため
parseInt()
parsefloat()
などで数値変換しなくても大丈夫です
さらに、複数の値を localStorage の
１つのキーにまとめて保存することもできます
また、逆に複数のキーにわけて保存することもできます
ちなみに、このJSON.parse() ですが
Web API でマッシュアップするときにも使えます
最近ではXML以外に JSON で提供もされていますので
いろいろ使うことができます
また、JSONを使うことで
ゲームの保存と読み込み、
セーブとロードができるので、いろいろと活用すると
おもしろいゲームができそうです

Web Storage はブラウザ側
つまりスマホ端末内に
任意のデータを保存する技術
これがない従来のweb アプリでは
データの保存には
webサーバーに保存する
もしくは
Cookie に保存していました
ちなみに、Cookie のh存容量は
4kB未満ですが
Web Storage では
2.4MBほどあります
Web Storage API は
キーと値のペアでデータを保存する
キーバーリュー型で実装されています
Web Storage には２種類あり、
データを永続化するlocalStorage
ブラウザを閉じるまで有効な
sessionStorage
この２つになります
この２つは用途により使い分けします
あと、これらはオリジンごとに保存されます
オリジンは、
プロトコル＋ドメイン＋ポート番号
のことです
Web Storage の基本的な書式は
ストレージへ値を保存するには
localStorage[key]= value;
ストレージからの読み出しは
var value = localStorage[key];
となります