変数に入れた値は、ページを再読み込みすると消えます。閉じても残しておきたいときに使うのが localStorage です。サーバーもデータベースも要りません。

書き方は2つだけ

script.js
// 保存する（名前と値のセット）
localStorage.setItem("username", "ふじわら");

// 取り出す
const name = localStorage.getItem("username");

// 消す
localStorage.removeItem("username");

名前を付けて保存し、その名前で取り出す。それだけです。保存先はその人のブラウザの中なので、他の人には見えませんし、別の端末にも引き継がれません。

CODE入力した名前を覚えさせるコードを書き換えると、すぐ下で動きます

名前を入れて保存を押し、プレビューを再実行（実行ボタン）してみてください。入力欄に前回の値が戻ります。

保存できるのは文字列だけ

数値を入れても、取り出すときには文字列になっています。配列やオブジェクトをそのまま入れることもできません。入れるときに JSON.stringify で文字列に変え、出すときに JSON.parse で戻します。

配列を保存する
const list = ["りんご", "みかん"];

// 保存：文字列に変換する
localStorage.setItem("list", JSON.stringify(list));

// 取り出し：元に戻す
const restored = JSON.parse(localStorage.getItem("list"));

何も保存されていないとき getItem は null を返します。null を JSON.parse に渡すとエラーになるので、値があるか確認してから使ってください。

注意すること

  • パスワードや個人情報は保存しない … 同じ端末を使う他の人から読めてしまう
  • 容量は5MB程度が上限 … 大量のデータには向かない
  • 別の端末・別のブラウザには引き継がれない … 同期はされない
  • プライベートモードでは消える、または使えないことがある

特に1つ目は大事です。localStorage はブラウザの開発者ツールから誰でも中身を見られます。秘密にしたい情報を置く場所ではありません。

向いている使い道

  • 入力の下書きを一時保存する
  • 表示設定（並び順、開閉状態）を覚えておく
  • 「はじめての方へ」の案内を一度見たら出さない

どれも「消えても致命的ではないもの」です。この基準で選ぶと、使いどころを間違えません。

sessionStorage との違い

書き方がまったく同じ sessionStorage というものもあります。違いは寿命で、こちらはタブを閉じると消えます。一時的な保持でよければ、こちらのほうが安全です。