localStorageで、小さな設定を覚えておく

保存するのは、色の名前だけ

このサイトのフッターでは、アクセントカラーを切り替えられます。選んだ色の名前をブラウザーのlocalStorageに保存し、ページを開いたときに読み戻す仕組みです。

サーバーへの送信やアカウント登録はありません。別のブラウザーや端末には同期されず、そのブラウザーで使う設定です。

読み込んだ値は、候補を確認する

保存された値をそのままCSSへ渡さず、あらかじめ決めた色の中から選びます。知らない値が入っていたら、初期色のまま表示します。

const colors = {
  orange: "#c54b2b",
  green: "#526044",
  blue: "#355cb0"
};

function applyTheme(name) {
  if (!Object.hasOwn(colors, name)) return;
  document.documentElement.style.setProperty(
    "--accent", colors[name]
  );
}

色をCSSカスタムプロパティにまとめると、リンクやマークなど複数の箇所へ同じ設定を適用できます。

保存できなくても、切り替えは動かす

ブラウザーの設定などによって、ストレージへのアクセスが拒否される場合があります。色の適用と保存を分け、保存に失敗してもそのページの操作は続けられるようにします。

function chooseTheme(name) {
  applyTheme(name);
  try {
    localStorage.setItem("takeshun-theme", name);
  } catch {
    // Keep the current page usable without persistence.
  }
}

try {
  applyTheme(localStorage.getItem("takeshun-theme"));
} catch {
  // The initial CSS color remains available.
}

この例は保存部分の最小形です。実際のUIでは、選択中のボタンのaria-pressedと表示名も一緒に更新します。

確認すること

• ボタンを押すと色と選択表示が変わる。
• 再読み込み後も選んだ色が適用される。
• 保存が使えなくても、記事やリンクが動く。
• どの色でも、本文や操作部品が読み取れる。

localStorageはオリジン単位です。HTTPとHTTPS、異なるドメインでは別の保存領域になるため、公開URLを変更すると以前の設定は引き継がれません。機密情報の保管場所としては使いません。