localStorage / sessionStorage

// データを保存します。
localStorage.setItem("キー", "値");

// データを取得します。
var value = localStorage.getItem("キー");

// データを削除します。
localStorage.removeItem("キー");

// すべてのデータを削除します。
localStorage.clear();

sample_localStorage.js

// パターン1: 文字列の保存・取得・削除
localStorage.setItem("username", "八神庵");
var name = localStorage.getItem("username");
console.log(name); // 『八神庵』と出力されます。

// キーが存在しない場合はnullを返します。
var result = localStorage.getItem("address");
console.log(result); // 『null』と出力されます。

// 特定のデータを削除します。
localStorage.removeItem("username");

// すべてのデータを削除します。
localStorage.clear();

sample_localStorage.js

// パターン2: オブジェクトの保存（JSON変換が必要）
var user = { name: "八神庵", org: "八神流古武術" };
localStorage.setItem("user", JSON.stringify(user)); // オブジェクトをJSON文字列に変換します。

// 取得時にJSONをオブジェクトに戻します。
var savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // 『八神庵』と出力されます。
console.log(savedUser.org);  // 『八神流古武術』と出力されます。

// 保存件数を確認します。
console.log(localStorage.length); // 『1』と出力されます。

sample_localStorage.html

<label>
	テーマ:
	<select id="theme">
		<option value="light">ライト</option>
		<option value="dark">ダーク</option>
	</select>
</label>

sample_localStorage.js

// パターン3: テーマ設定の保存（ページを閉じても保持される）
var themeSelect = document.getElementById("theme");

// ページ読み込み時に保存済みのテーマを復元します。
var savedTheme = localStorage.getItem("theme");
if (savedTheme) {
	themeSelect.value = savedTheme;
	document.body.className = savedTheme;
}

// 選択変更時に保存します。
themeSelect.addEventListener("change", function() {
	localStorage.setItem("theme", themeSelect.value);
	document.body.className = themeSelect.value;
});

サンプルページはこちら

『localStorage』と『sessionStorage』はブラウザにキーと値のペアでデータを保存するためのWeb Storage APIです。Cookieと異なりサーバーへ自動送信されないため、クライアント側でのデータ管理に適しています。

保存できるのは文字列のみです。オブジェクトや配列を保存する場合は『JSON.stringify()』で文字列に変換してから保存し、取得時に『JSON.parse()』でオブジェクトに戻す必要があります。保存容量はブラウザによって異なりますが、一般的に5MB程度です。

テーマ設定の保存やフォームの入力途中の一時保存、ショッピングカートの管理など、ページを閉じても情報を残しておきたい場面で『localStorage』が活用されています。一方『sessionStorage』は、マルチステップフォームの一時データなど、タブを閉じた際に消えてほしいデータの管理に適しています。