(JavaScript)ブラウザに値を保存する(localStorage)

概要

JavaScriptでは、ローカルに値を保管する仕組みがあります。
ページを閉じても、次回はそれが復元されます。
localStorageを利用すれば簡単に実現できます。

コード

// 保存
localStorage.setItem("name", "ジョン"); // "name"→"ジョン"を保存
localStorage.setItem("id", 1234); // "id"→"1234"を保存（文字列になってしまう）
// 取得
let name = localStorage.getItem("name"); // "ジョン"を取得
let id = localStorage.getItem("id"); // "1234"を取得

補足

localStorageを使うと、数値1234が文字列になって保存されたり、オブジェクトや配列が保存できないという問題があります。
この場合は、JSON形式で保存すれば解決できるので、コードを示します。（配列は、オブジェクトの中に入れて保管できます。）

// セーブするとき
let objSave = { // 保存したいオブジェクト
	name : "ジョン",
	id : 1234, // 数値のまま保存できる
	friend : ["花子", "太郎"] // 中に配列を入れてもOK
};
let jsonSave = JSON.stringify(objSave); // JSON形式に変換
localStorage.setItem("data", jsonSave); // 保存

// ロードするとき
let jsonLoad = localStorage.getItem("data"); // 取得
let objLoad = JSON.parse(jsonLoad); // オブジェクトに変換

// 元通りか確認
alert(objLoad.friend[1]); // 太郎