ローカルストレージ

別名: Local Storage, localStorage, Web Storage

ローカルストレージとは、ブラウザにデータを保存できる仕組みです。
ページを閉じたり、ブラウザを再起動しても、保存したデータはそのまま残ります。

なぜローカルストレージが必要なのか

通常、Webページ上で扱うデータ（たとえば入力内容や選択した設定など）は、ページを閉じると消えてしまいます。
しかし、Webサイトの「ダークモードの設定」や「お気に入りリスト」など、次にアクセスしたときも覚えておいてほしい情報があります。

ローカルストレージを使えば、こうしたデータをブラウザに保存して、次回以降も利用できます。
※実際のところ、データはあなたのスマホやPCの専用場所に保存されていて、ブラウザはこれを読み取っています。

普段使っているWebサイトでも、ローカルストレージは活用されています。

「前に設定した内容が、再アクセスしても残っている」という体験は、ローカルストレージで実現されていることが多いです。

実際に確認したい場合は、ブラウザで F12 を押して開発者ツールを開き、「Application」タブ →「Local Storage」を見てみましょう。そのサイトが保存しているデータを一覧で確認できます。

UX(webサイト利用者が使いやすいと思う・操作しててイライラしない)のためにローカルストレージが利用されます。個人情報を保存したり、データベースとして利用することはないです。

特徴	内容
保存容量	約5MB（ブラウザにより異なる）
有効期限	なし（明示的に削除するまで残る）
保存形式	文字列のみ
アクセス範囲	同じオリジン（ドメイン）内でのみ共有
セキュリティ	JavaScriptから誰でも読み取れるため、パスワードやトークンなどの機密情報は保存しない

ブラウザには似た仕組みとしてセッションストレージ（sessionStorage）もあります。

項目	ローカルストレージ	セッションストレージ
データの寿命	明示的に削除するまで残る	タブやブラウザを閉じると消える
用途	テーマ設定、お気に入りなど	一時的なフォームデータなど

使い方はほぼ同じですが、データをどれくらいの期間保持したいかで使い分けます。