ローカルストレージは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の値も変更できたりします。うまく使いこなせば、デバッグが捗りそうです。