アイテムの取得、設定、削除
Web Storage APIでデータを読み書きします
「アイテムの取得、設定、削除」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
Storage APIの全体像
localStorageとsessionStorageは、4つの基本メソッド、getItem(key)、setItem(key, value)、removeItem(key)、clear()を共通して公開しています。どちらもブラウザーによって管理される、シンプルなキーと値のストレージです。
setItemは文字列を保存する
localStorage.setItem("theme", "dark")は、文字列を「theme」というキーで保持します。キーと値はどちらも文字列である必要があります。文字列以外の値は、保存前にString()によって文字列へ変換されるため、オブジェクトや配列が意図せず壊れてしまいます。
localStorage.setItem("theme", "dark");
localStorage.setItem("count", "42");JSONによるオブジェクトの保存
構造化データを保存するには、JSONでシリアライズします。localStorage.setItem("user", JSON.stringify(user))のように保存し、const user = JSON.parse(localStorage.getItem("user"))で読み戻します。保存された値が不正な形式である可能性があるため、解析処理は必ずtry/catchで囲んでください。
const user = { name: "Ada", age: 30 };
localStorage.setItem("user", JSON.stringify(user));
const loaded = JSON.parse(localStorage.getItem("user"));getItemは文字列またはnullを返す
getItem("missing")は、キーが存在しない場合にnullを返します。undefinedを返すことはありません。デフォルト値を指定するには、Null合体演算子を使用します。const theme = localStorage.getItem("theme") ?? "light"のように記述してください。
プロパティアクセス構文
角括弧記法とドット記法も使用できます。localStorage.theme = "dark"やlocalStorage["theme"]のように記述します。どちらも動作しますが、意図が伝わりにくくなります。これはオブジェクトのプロパティではなく永続ストレージであることを明確に示せるため、明示的なメソッド呼び出しを優先してください。
removeItemとclear
localStorage.removeItem("theme")は1つのキーを削除します。localStorage.clear()は、現在のオリジンにあるすべてのキーを消去します。clear()は破壊的な操作です。十分な理由がない限り呼び出さないでください。ページ上のすべてのスクリプトが設定したデータまで削除されます。
保存されたキーの反復処理
localStorage.lengthとlocalStorage.key(index)を使って保存されたすべてのキーを走査できます。または、Object.keys(localStorage)をスプレッド構文で展開することもできます。これは、マイグレーションやデバッグ、「cache:」で始まるすべてのキーを削除するようなプレフィックスベースのクリーンアップに便利です。
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
console.log(key, localStorage.getItem(key));
}クォータ超過エラー
ブラウザーはオリジンごとにおよそ5～10MBを割り当てます。クォータを超えるとQuotaExceededErrorがスローされます。画像キャッシュやドキュメントの下書きなど、サイズが大きくなる可能性のある値を保存する場合は、エラーでアプリケーションがクラッシュしないようにsetItemをtry/catchで囲んでください。
try {
localStorage.setItem("draft", largeString);
} catch (e) {
if (e.name === "QuotaExceededError") {
// free space, warn user, or fall back
}
}キーの名前空間化
ストレージはオリジン全体で共有されます。キーにアプリや機能の名前（app:settings、cart:items）をプレフィックスとして付け、同じオリジンで実行される他のスクリプト、サードパーティーライブラリ、ブラウザー拡張機能との衝突を避けてください。
同期的でブロッキングする処理
Storage APIは完全に同期的であり、すべての呼び出しはディスクI/Oが完了するまでメインスレッドをブロックします。非常に大きなデータを保存したり、タイトなループ内でsetItemを呼び出したりしないでください。代わりに、更新を1つのシリアライズしたオブジェクトにまとめます。
sessionStorageとlocalStorageの比較
APIの構成は同じですが、保持期間が異なります。sessionStorageはタブを閉じるとクリアされ、localStorageはブラウザーを再起動しても保持されます。一時的なウィザードの状態にはsessionStorageを、再読み込み後も残すユーザー設定にはlocalStorageを選択してください。
理解度チェック
キーが一度も設定されていない場合、localStorage.getItem("missing-key")は何を返しますか？
まとめ
getItem、setItem、removeItem、clearは、Web Storageを構成する4つの基本要素です。値は常に文字列であるため、構造化データはJSONでラップしてください。nullの戻り値、QuotaExceededError、そして同じオリジン上の他のスクリプトと共存するための名前空間化を考慮しましょう。
よくある質問
「アイテムの取得、設定、削除」レッスンは無料ですか？
はい。「アイテムの取得、設定、削除」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「アイテムの取得、設定、削除」で何を学びますか？
Web Storage APIでデータを読み書きします ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「アイテムの取得、設定、削除」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。