Web Storage API

localStorage とは？

localStorage は、Webブラウザの中に小さな「メモ帳」を作って、そこにデータをずっと保存しておける仕組みです。

たとえば、ユーザーの名前や設定内容、ページ内の状態などをブラウザが覚えておけるので、次に同じページを開いたときに前の状態を再現できます。

Cookie と違ってサーバーに送られないので、通信量も増えません。ブラウザを閉じてもデータは消えず、手動で消すか、スクリプトで削除するまで残ります。

使い方の基本

localStorage は「キーと値」でデータを保存します。

保存も読み出しもとても簡単です。

// データを保存
localStorage.setItem("userName", "Yuki");

// データを取り出す
const name = localStorage.getItem("userName");
console.log(name); // → "Yuki"

// データを削除
localStorage.removeItem("userName");

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

setItem()

データを保存

getItem()

データを取得

removeItem()

指定したデータを削除

clear()

すべて削除

注意点

• 保存できるのは「文字列」だけです。オブジェクトを保存したいときは JSON.stringify() で文字列に変換します。
• 容量はブラウザによって異なりますが、だいたい5MB前後です。
• 同じドメイン（例：example.com）で共有されます。サブドメイン（例：sub.example.com）は別扱いになります。