1. dicre

    Posted

    dicre
Changes in title
+Web Storageの使用
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,53 @@
+HTML5ではlocalStorageという配列(オブジェクト)にデータを保存できる。保存はブラウザ単位に行われる。
+sessionStorageという配列も同様だが、こちらは、ブラウザを閉じたときにデータは消える。
+
+##HTMLの例
+```html
+<input type="text" id="input">
+<input type="button" value="保存" id="save">
+<input type="button" value="読み込み" id="load">`
+```
+##スクリプトの例
+```js
+$(function(){
+ $("#save").click(function(){
+ var str = $("#input").val();
+ localStorage["test"] = str;
+ });
+
+ $("#load").click(function(){
+ var str = localStorage["test"];
+ $("#input").val(str);
+ });
+});
+```
+
+##メソッド
+
+|機能|メソッド|
+|:--|:--|
+|保存| setItem(key,value)|
+|取得| getItem(key)|
+|削除| removeItem(key)|
+|クリア| clear()|
+
+
+##補足:保存に便利な JSON.stringify と JSON.parse
+WebStorageでは、一つのキーに一つしかデータを保存できず、配列の表現も難しい。このため、オブジェクトを文字列化し、保存すると便利である。
+
+JSONデータを文字列化するJSON.stringify
+例:
+
+```js
+ var obj = {sname:"りんご",tanka:100};
+ alert( JSON.stringify(obj) );
+```
+
+文字列化したJSONデータをオブジェトにするJSON.parse
+例:
+
+```js
+ var str = '{"sname":"りんご","tanka":100}';
+ var obj = JSON.parse(str);
+ alert( obj.sname );
+```