ローカルストレージとは？ログインなしで小さな情報を残す仕組み
「気になった記事を、次に来たときも見つけられるようにしたい」。そのために、最初から会員登録を作る必要があるとは限りません。ブラウザには、サイトごとに小さな情報を残せる場所があります。その一つがローカルストレージ（localStorage）です。
たとえば、お気に入りの記事番号と保存した日を残します。次に同じブラウザでサイトを開いたら、その記録を読み、保存した記事を一覧に出す。これで「あとで読む」の基本的な形を作れます。
保存されるのは、サイトが指定したデータです。記事番号を保存しただけでは、記事の本文や画像を通信なしで読めるようにはなりません。オフラインで使う機能は、別に考えます。
ローカルストレージのメリットは、小さな保存機能から始められること
保存のためだけに、読者へメールアドレスやパスワードを入力してもらわずに済みます。運営側も、端末に残すだけの機能なら、保存専用のサーバーや会員管理を設けずに作れます。静的なサイトでも、ブラウザで動くJavaScriptを加えて実装できます。
- お気に入り：選んだ記事や商品の番号を残す。
- 既読マーク：どの記事を読み終えたかを残す。
- 表示設定：ふりがなの有無や、選んだ表示方法を残す。
- 短いメモ：あとで見返したい言葉を、このブラウザへ残す。
「サーバーを増やさずに済む」と「作る手間がない」は別です。保存・読み出し・削除に加えて、保存できなかった場合の表示も必要です。機能を小さく始めるなら、まず保存するものを一種類に絞ると、確認する範囲を決めやすくなります。
ローカルストレージのデメリットと、保存データが消える条件
同じ人が使っていても、スマホで保存したものが自動でPCへ出てくるわけではありません。同じPCでも、ブラウザや利用者のプロファイルが違えば、別の保存場所になります。
| 条件 | 起きること | 機能を作るときに決めること |
|---|---|---|
| 端末やブラウザを変える | 保存した一覧が自動で引き継がれない | 端末間で共有する必要があるか |
| ブラウザのサイトデータを削除する | 保存内容も消える | 消えて困る内容は書き出せるようにするか |
| プライベート閲覧を終える | その閲覧中の保存内容は保持されない | 一時利用でも使える表示にする |
| 保存を禁止している・容量が足りない | 書き込みに失敗する場合がある | 入力を残し、保存できなかったと伝える |
| サブドメインやHTTP/HTTPSが変わる | それまでと同じ保存領域にはならない | サイト移行時にデータの扱いも考える |
localStorage自体には有効期限の指定がありません。ただし、永久に残る約束ではありません。保存期間とブラウザごとの領域についてはMDNのlocalStorageの説明に整理されています。
また、大量のデータを一度に読み書きすると、その間ほかのJavaScriptの処理を待たせます。長い記録や画像を扱うなら、より多くのデータを扱う端末内の仕組みであるIndexedDBなども候補です。Web Storageの処理方式も、この選び分けに関係します。
お気に入りの保存を、コイシオリの実例で確かめる
私たちが運営するコイシオリの「わたしのしおり箱」では、記事にあらかじめ書かれた短い言葉を、一枚のしおりとして残せます。自由に書き込むノートとは分けた機能です。
撮影用のブラウザで記事のしおりを一枚保存し、一覧ページを再読み込みしました。一枚が残っていることを確認できました。保存情報を共有しない別のブラウザ環境で開くと、一覧は空でした。最後に元の環境で取り出すボタンを押すと、保存一覧から消えました。
この違いを見れば、「同じサイトへ来れば誰でも同じ内容が見える」のではなく、そのブラウザに残した情報で表示が変わることが分かります。自分のサイトに付ける場合も、保存した直後だけでなく、再読み込みと削除まで通して試しましょう。
端末保存とサーバー保存は、必要な機能から選ぶ
| 残したいもの | 検討する方法 | 選ぶ理由 |
|---|---|---|
| この端末のお気に入り・表示設定 | localStorage | 小さなデータを、次回も同じブラウザで使いたい |
| この端末の多めの記録・画像 | IndexedDBなど | 量やデータの種類に合う保存方法が必要 |
| スマホとPCで共通のメモ | サーバー保存と利用者を識別する仕組み | 別の端末から同じ内容を取り出したい |
| 予約・注文・顧客情報 | 管理機能を備えたサービスやサーバー側の仕組み | 事業者が受け取り、管理する必要がある |
IndexedDBに変えても、端末間の同期が自動で付くわけではありません。また、パスワードや認証情報を、普通のメモと同じようにlocalStorageへ入れる設計にはしません。保存する内容と、誰が取り出す必要があるかが、方法を選ぶ基準です。
サーバーに置くサイトそのものと、読者のデータを保存する場所は別の話です。サイト全体の作り方で迷ったら、WordPressとAstroの選び方と合わせて考えると整理できます。
ローカルストレージの機能追加をAIへ頼む指示例
次は、この保存の仕組みを自分のサイトへ取り入れるために組み直した例です。技術名だけでなく、残したい内容と使う場面を渡します。
［サイトURL］に、ログインなしのお気に入り機能を付けたいです。 保存するものは記事の番号と保存日時です。 このブラウザで次に開いたときも一覧を見られればよく、端末間の同期は不要です。 保存・解除・保存一覧・まだ何も保存していない画面を用意してください。 保存できなかった場合は成功と表示せず、理由が分かる短い案内を出してください。 既存の記事URLと本文はそのままにしてください。 保存後の再読み込み、解除、別のブラウザ環境、保存が禁止された場合を確認してください。 この条件でlocalStorageが合うかを説明してから実装してください。
最初はお気に入りだけでも十分です。実際に使い、端末を変えたときにも必要だと分かった段階で、引き継ぎや同期を検討できます。記事が増えて探しにくくなった場合は、サイト内検索の設置方法も次の改善になります。