1. dicre

    Posted

    dicre
Changes in title
+Web Storageの使用
Changes in tags
Changes in body
Source | HTML | Preview

HTML5ではlocalStorageという配列(オブジェクト)にデータを保存できる。保存はブラウザ単位に行われる。
sessionStorageという配列も同様だが、こちらは、ブラウザを閉じたときにデータは消える。

HTMLの例

<input type="text" id="input">
<input type="button" value="保存" id="save">
<input type="button" value="読み込み" id="load">`

スクリプトの例

$(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
例:

    var obj = {sname:"りんご",tanka:100};
    alert( JSON.stringify(obj) );

文字列化したJSONデータをオブジェトにするJSON.parse
例:

    var str = '{"sname":"りんご","tanka":100}';
    var obj = JSON.parse(str);
    alert( obj.sname );