ローカルストレージ

概要

ブラウザに小さなデータを保存しておける場所のこと。
JavaScriptからアクセスできて、ページを閉じても情報が残るのが特徴。

ポイント

• ブラウザ内に保存される（サーバーには送られない）
• localStorage.setItem() と getItem() で読み書きできる
• 文字列しか保存できないため、オブジェクトを保存するにはJSON形式への変換が必須

体験してみよう

ユーザー情報を入力して保存すると、ページを更新してもデータが残ります。これは裏側で入力値をJSONという形式の文字列に変換して、ローカルストレージに保存しているためです。

①ユーザー情報を入力して保存してみよう

②ページを更新してみよう

コードを書いて実践してみよう

「体験してみよう」の裏側では、このようにJSONを利用してオブジェクトを文字列に変換しています。JSON.stringify()で保存し、JSON.parse()で元に戻すのがポイントです。

// ユーザーオブジェクトを作成
const user = { name: '山田', age: 30 };

// オブジェクトをJSON文字列に変換して保存
localStorage.setItem('userData', JSON.stringify(user));

// JSON文字列を取得してオブジェクトに変換
const jsonData = localStorage.getItem('userData');
const savedUser = JSON.parse(jsonData);

console.log(savedUser.name); // "山田"