💾 localStorageからnullが返る

😰 こんな症状

localStorage.getItem()で保存したはずのデータがnullになる。localStorageのキー管理で起きやすいよ。

🔍 原因

setItemとgetItemのキー名が一致していない、別のドメイン（オリジン）で保存したデータにアクセスしようとしている、またはブラウザの設定でストレージが無効になっているよ。localStorageはオリジンごとに分離されるから、localhost:3000とlocalhost:5173は別のストレージだよ。

❌ エラーが起きるコード

// setItemとgetItemのキー名が一致していない、別のドメインで保存した、またはブラウザの設定

✅ 直し方

1. setItem('key', value)とgetItem('key')のキー名が完全一致しているか確認する（大文字小文字も区別）。 2. 同じオリジン（URL）でアクセスしているか確認する。 3. 開発者ツールのApplicationタブ→Local Storageで保存されているデータを確認する。 4. JSON.stringify/parseでオブジェクトを保存・復元する。

✅ 修正後のコード

// setItem("key", value) と getItem("key") のキー名が完全一致して

🔗 関連するエラー

• Uncaught TypeError: Cannot read properties of null — getElementById の id が存在しない
• ボタンを押しても何も起きない — getElementById の id 不一致
• TypeError: Cannot read properties of null（null参照） — nullのプロパティにアクセスしている
• TypeError: Cannot set properties of null (setting 'textContent') — nullに対してプロパティを設定しようとしている
• Uncaught ReferenceError: xxx is not defined — 変数・関数名のタイポ

🔗 別カテゴリの関連エラー

• localStorage: QuotaExceededError
• localStorage に保存できない
• JSON.parse: unexpected character

📖 この問題を学べるレッスン

JavaScriptコースで基礎から学ぶ →

📝 関連ブログ記事

• プログラミングのエラーメッセージの読み方 — エラーの読み方を基礎から解説
• JavaScriptとは？初心者向けにわかりやすく解説 — 変数・関数・イベントの基本
• JavaScriptでボタンクリックを動かす方法 — ボタンクリック時の動作を解説

📖 関連する用語

• localStorage
• JavaScript
• Java・JavaScript の違い
• null・undefined の違い

❓ 関連するQ&A

• console.logの結果はどこで見る？
• ボタンクリックで何も起きない
• letとconstどっちを使う？