データを保存して読み取る
setItem、getItem、removeItem を使います。
「データを保存して読み取る」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。
ブラウザーのキーと値のストレージ
Web Storage は、ブラウザー上で各オリジンにシンプルなキーと値のストアを提供します。2 つの API である localStorage と sessionStorage は同じメソッドを共有し、文字列だけを保存します。
setItem による書き込み
setItem(key, value) で値を保存します。どちらの引数も文字列です。
localStorage.setItem("theme", "dark");
localStorage.setItem("username", "ada");getItem による読み取り
getItem(key) で値を取得します。キーが存在しない場合は undefined ではなく null を返します。
const theme = localStorage.getItem("theme"); // "dark"
const missing = localStorage.getItem("nope"); // nullプロパティアクセス
オブジェクトのプロパティと同じように読み書きすることもできますが、メソッド形式のほうが明確で、組み込みの名前との衝突も避けられます。メソッドを優先してください。
localStorage.theme = "light"; // works
console.log(localStorage.theme); // "light"1 つの項目を削除する
removeItem(key) で 1 つのエントリを削除します。存在しないキーを削除しても何も起こらず、安全です。
localStorage.removeItem("username");すべてを削除する
clear() は現在のオリジンにあるすべてのキーを消去します。元に戻すことはできないため、慎重に使用してください。
localStorage.clear();すべてが文字列
ストレージに保存できるのは文字列だけです。数値や真偽値はテキストに変換されます。読み出した値は文字列として扱い、必要に応じて変換してください。
localStorage.setItem("count", 5);
const n = localStorage.getItem("count"); // "5" (string)
const num = Number(n); // 5キーの数を数える
length プロパティは保存されているキーの数を示し、key(index) は指定した位置のキー名を返します。反復処理に便利です。
console.log(localStorage.length);
const firstKey = localStorage.key(0);ストレージを反復処理する
length と key() を使って、保存されているすべてのキーをループ処理します。処理中に各値を読み取ります。
for (let i = 0; i < localStorage.length; i++) {
const k = localStorage.key(i);
console.log(k, localStorage.getItem(k));
}存在の確認
存在しないキーは null を返すため、単純な比較で存在を確認できます。
if (localStorage.getItem("token") !== null) {
console.log("user has a token");
}同一オリジンのみ
ストレージはオリジン（スキーム + ホスト + ポート）ごとに分離されています。あるサイトから別のサイトのストレージを読み取ることはできず、http と https も異なるオリジンとして扱われます。
クイックチェック
Web Storage の読み書きです。
まとめ
Web Storage は、オリジンごとに用意された文字列のキーと値のストアです。setItem、getItem（存在しない場合は null を返します）、removeItem、clear を使用します。length と key(i) で反復処理できます。すべてが文字列なので、型の変換は自分で行います。また、ストレージはオリジンごとに分離されています。
よくある質問
「データを保存して読み取る」レッスンは無料ですか？
はい。「データを保存して読み取る」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。
「データを保存して読み取る」で何を学びますか？
setItem、getItem、removeItem を使います。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
JavaScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「データを保存して読み取る」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このJavaScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。