女性向けエンジニアスクール
3秒でわかる
ブラウザに文字列データを保存し、タブを閉じても残しておける仕組み。表示テーマの選択や入力の下書きなど、その端末だけの設定を覚えさせるのに使います。
30秒図解
もう少し詳しく
どういうものか
localStorage は、ブラウザがオリジン(プロトコルとドメインとポートの組)ごとに用意する、キーと値の保存領域です。値は文字列だけで、容量はおおむね5MB前後です。特徴は、明示的に削除するかブラウザのデータを消すまで残り続けることで、タブを閉じてもパソコンを再起動しても内容が保たれます。
操作はすべて同期的で、setItem getItem removeItem clear の4つを覚えれば足ります。
なぜ必要か
サーバーに送るほどでもない、その端末だけの状態を持たせたい場面があります。ダークモードの選択、閉じたお知らせバナーを二度と出さない設定、書きかけのフォーム、直前に見ていた商品などです。これらをサーバーに保存するとログインが必須になり、通信も増えます。localStorage なら、ログインしていない訪問者にも設定を覚えさせられます。
具体例
const settings = { theme: "dark", fontSize: 16 };
// 保存(文字列にしてから)
localStorage.setItem("settings", JSON.stringify(settings));
// 読み出し(パースして戻す。未保存なら null が返る)
const raw = localStorage.getItem("settings");
const loaded = raw ? JSON.parse(raw) : { theme: "light", fontSize: 14 };
// 削除
localStorage.removeItem("settings");getItem は見つからないとき null を返します。そのまま JSON.parse(null) すると null になるだけでエラーにはなりませんが、初期値を用意しておく方が扱いやすくなります。
つまずきやすいところ
数値や真偽値を入れると、取り出したときに文字列に変わっています。localStorage.setItem("count", 0) の後に getItem("count") すると "0" が返り、if (getItem("count")) は真になります。数値として使うなら Number() を通します。
トークンやパスワードを保存するのも危険です。localStorage は JavaScript から誰でも読めるため、XSS が起きた瞬間に中身がすべて奪われます。認証情報は HttpOnly の Cookie に置きます。
保存容量を超えると QuotaExceededError が投げられます。プライベートブラウジングで保存自体が拒否される環境もあるので、書き込みは try で囲むのが安全です。
似た用語との違い
| 仕組み | 消えるタイミング | サーバーへ送られるか |
|---|---|---|
| localStorage | 明示的に消すまで残る | 送られない |
| sessionStorage | そのタブを閉じたら消える | 送られない |
| Cookie | 有効期限まで | 毎回のリクエストに自動で付く |
サーバー側で読む必要があるなら Cookie、ブラウザ内で完結するなら Storage 系という分け方になります。
