Storage イベントと容量制限
変更に反応し、容量制限を守ります。
「Storage イベントと容量制限」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
ストレージの変更への反応
storageイベントを使うと、別のタブがlocalStorageを変更したときに、あるタブで反応できます。これにより、タブ間の簡単な同期が可能になります。
storageイベントを監視する
windowにリスナーを追加します。同一オリジンの別のタブでlocalStorageが変更されるたびに発火しますが、変更を行ったタブでは発火しません。
window.addEventListener("storage", (e) => {
console.log("Key changed:", e.key);
});StorageEventオブジェクト
イベントにはkey、oldValue、newValue、storageArea、urlが含まれます。これらを組み合わせることで、何が変更されたのかを正確に把握できます。
window.addEventListener("storage", (e) => {
console.log(e.key, e.oldValue, "->", e.newValue);
});別のタブでのみ発火
重要な注意点として、setItemを呼び出した同じタブではイベントは発火しません。このイベントは他のタブに通知するためのものなので、同じタブの更新には依存しないでください。
タブ間同期のパターン
イベントを使ってタブの状態を一致させます。たとえば、あるタブで認証トークンを削除したときに、すべてのタブでユーザーをログアウトさせることができます。
window.addEventListener("storage", (e) => {
if (e.key === "token" && e.newValue === null) {
logoutUI();
}
});clear()を検出する
clear()が実行されると、keyがnullに設定された状態でイベントが発火します。このケースにも対応して、すべての状態をリセットしてください。
window.addEventListener("storage", (e) => {
if (e.key === null) resetApp();
});ストレージ容量の上限
各オリジンには限られた容量が割り当てられます。localStorageでは通常、合計で5MB程度です。これはIndexedDBよりはるかに少ないため、保存するデータは少量にとどめてください。
容量超過エラー
容量の上限を超えると、setItemでQuotaExceededErrorがスローされます。大きなデータや信頼できないデータを書き込むときは、必ずtry/catchで囲んでください。
try {
localStorage.setItem("big", hugeString);
} catch (e) {
console.log("Storage full:", e.name);
}UTF-16では2倍カウントされる
文字列はUTF-16として保存されるため、各文字はおよそ2バイトを使用します。5MBの容量には約250万文字を保存できますが、ASCII以外のテキストでは保存できる文字数が少なくなります。
使用量を見積もる
キーと値の長さを合計すれば、使用量をおおよそ測定できます。正確なAPIはありませんが、実用的な見積もりになります。
let total = 0;
for (let i = 0; i < localStorage.length; i++) {
const k = localStorage.key(i);
total += k.length + localStorage.getItem(k).length;
}
console.log(total, "chars");より大きな仕組みを使うタイミング
数MBを超える大規模なデータや構造化データには、IndexedDBを使用してください。Web Storageは、小さなフラグ、設定、トークンの保存に適しています。
確認問題
ストレージイベントと容量制限
まとめ
storageイベントは、オリジン内の別のタブにlocalStorageの変更を通知し、key、oldValue、newValueを渡します（clearした場合、keyはnullです）。容量はおよそ5MBで、それを超えて書き込むとQuotaExceededErrorがスローされるため、リスクのある書き込みはtry/catchで囲み、大きなデータにはIndexedDBを使用してください。
よくある質問
「Storage イベントと容量制限」レッスンは無料ですか？
はい。「Storage イベントと容量制限」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「Storage イベントと容量制限」で何を学びますか？
変更に反応し、容量制限を守ります。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Storage イベントと容量制限」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- データを保存して読み取る
- localStorage と sessionStorage
- JSON でオブジェクトを保存する
- Storage イベントと容量制限