マイナー・マイナー

隠れた名作の発掘が生きがい。

【JavaScript】ローカルストレージにオブジェクトを保存する


スポンサードリンク

ローカルストレージはkeyとvalueを指定してブラウザにデータを保持する仕組みです。valueは文字列のため、オブジェクトを保存したいときはJSON文字列に変換して格納するといった工夫が必要です。そのメモを残します。


テストコード

function testLocalStorage() {
     // ローカルストレージに文字列を保存
     localStorage.setItem("user", "hoge");
    
     // キーを指定して文字列を取得
     console.log(localStorage.getItem("user")); // -> hoge
    
     // ローカルストレージに格納したいオブジェクト
     var userInfo = {"name":"hoge", "age":27}
    
     // オブジェクトをそのまま保存
     localStorage.setItem("userInfoObj", userInfo);
    
     // よく分からないものを取得
     console.log(localStorage.getItem("userInfoObj")); // -> [object Object]
    
     // オブジェクトをJSON文字列に変更して格納
     localStorage.setItem("userInfoStr", JSON.stringify(userInfo));
    
     // JSON形式の文字列を取得できる
     console.log(localStorage.getItem("userInfoStr")); // -> {"name":"hoge","age":27}
    
     // オブジェクトに戻すためにはJSON.parse
     console.log(JSON.parse(localStorage.getItem("userInfoStr"))); // -> Object {name: "hoge", age: 27}
    
     // ローカルストレージに保存した値を削除
     // localStorage.removeItem("user");
     // localStorage.removeItem("userInfoObj");
     // localStorage.removeItem("userInfoStr");
}


ローカルストレージの内容は、ChromeだとDeveloper ToolのResourcesから見ることができます。この画面でkeyとvalueの値も変更できたりします。うまく使いこなせば、デバッグが捗りそうです。

f:id:yosinoo:20160201222750p:plain