localStorageの基本(ブラウザにデータを保存する)

このレッスンでは、localStorageを使ってブラウザにデータを保存する基本を学び、ページを閉じても消えない仕組みを理解することを目標にします。「localStorage 使い方」で調べている方向けの内容です。

localStorageは、ページを閉じても消えない「ブラウザの中の保管庫」です。setItem()で保存し、getItem()で取り出します。ToDoアプリの入力内容を保存しておく、といった用途で使われます。

サンプルコードでは、ボタンをクリックするとlocalStorage.setItem('name', 'たろう')で値を保存し、別のボタンでlocalStorage.getItem('name')を使って保存した値を読み込んで表示しています。ページを再読み込みしても保存した値が残っている点も、実際に試して確認してみましょう。

初心者がよくつまずくのが、localStorageには文字列しか保存できない点です。数値やオブジェクトを保存したい場合は、いったんJSON.stringify()で文字列に変換してから保存し、取り出すときにJSON.parse()で元の形に戻す必要があります。

サーバーにデータを送信しなくても、ユーザーのブラウザだけで設定やメモを保持できるのが特徴です。ダークモードの選択状態を覚えておく仕組みなど、身近なWebサイトの機能の裏側でもよく利用されています。

<button onclick="localStorage.setItem('name', 'たろう'); document.getElementById('out').textContent = '保存しました';">名前を保存</button>
<button onclick="document.getElementById('out').textContent = 'localStorageの値: ' + localStorage.getItem('name');">読み込む</button>
<p id="out">ボタンを押してみましょう</p>

OUTPUT / 実行結果

💡 プレビューはこのページ内だけで動作し、外部には送信されません。

", "sampleOutput": "", "goal": "localStorage.setItem()でデータを保存し、getItem()で取り出して表示してみましょう。", "note": "localStorageはブラウザにデータを保存できる仕組みです。ページを閉じても消えず、次回訪問時にも同じデータを読み出せます。"}, "advanced": {"starter": "\n

\n", "sampleOutput": "", "goal": "ボタンをクリックしたときにlocalStorageへ保存し、その値を画面に表示するプログラムを作ってみましょう。", "note": "addEventListener(\"click\", ...)でボタンの操作をきっかけに、localStorageへの保存と画面表示の更新を組み合わせられます。"}, "intermediate": {"goal": "ボタンをクリックしてlocalStorageに保存し、読み込みボタンで値を表示してみましょう。"}}}

🎯

ここまでできればゴール達成!
入力内容を保存して、再訪問時にも残しておけるようになります。