第13章ローカルストレージ

ローカルストレージとは

ローカルストレージは、Webページのセッション間でもデータを持続的に保存することができるWeb APIです。
クッキーと異なり、サーバーに毎回データを送信しないので、大量のデータをクライアント側で保存するのに適しています。
一般的には、5MB~10MBの保存容量がありますが、ブラウザによっては異なる場合があります。

データの保存

データをローカルストレージに保存するには、setItemメソッドを使用します。

// ローカルストレージにデータを保存する
localStorage.setItem('キー', '値');

// 例: ユーザー名を保存
localStorage.setItem('username', 'Taro');

データの取得

保存したデータを取得するには、getItemメソッドを使用します。

// ローカルストレージからデータを取得する
const value = localStorage.getItem('キー');

// 例: ユーザー名を取得
const username = localStorage.getItem('username');
console.log(username); // Taroと表示される

全てのデータのクリア

ローカルストレージに保存されている全てのデータをクリアするには、clearメソッドを使用します。

// ローカルストレージの全てのデータをクリアする
localStorage.clear();

データの形式

ローカルストレージは、キーと値のペアとしてデータを保存しますが、このキーと値は文字列として保存されます。

そのため、オブジェクトや配列を保存する場合は、JSON形式の文字列に変換してから保存する必要があります。

// オブジェクトを保存する例
const user = {
  name: "Taro",
  age: 25
};

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

// 取得する時もJSON形式の文字列をオブジェクトに変換
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Taroと表示される

ローカルストレージの容量確認

ブラウザによってはローカルストレージの容量が異なることがありますが、多くのモダンブラウザでは5MBから10MBの容量が提供されています。

この容量を超えるとエラーが発生するので、注意が必要です。

セキュリティとの関連

ローカルストレージはJavaScriptからアクセス可能なので、XSS(クロスサイトスクリプティング)の攻撃によりデータが盗まれるリスクがあります。

パスワードやトークンなどの機密情報をローカルストレージに保存することは推奨されません。

セッションストレージとの違い

セッションストレージもWebページのデータ保存のためのAPIですが、ブラウザを閉じるとデータが消える点でローカルストレージとは異なります。

短期的なデータ保存にはセッションストレージを、長期的なデータ保存にはローカルストレージを使用します。

// セッションストレージにデータを保存
sessionStorage.setItem('sessionKey', 'sessionValue');

// セッションストレージからデータを取得
const sessionValue = sessionStorage.getItem('sessionKey');

練習問題1.

ローカルストレージに、キー"username"、値"Taro"を保存してください。

その後、保存したデータを取得し、コンソールに表示してください

練習問題2.

以下のオブジェクトをローカルストレージに保存してください。

保存したオブジェクトをローカルストレージから取得し、オブジェクトのnameプロパティをコンソールに表示してください。

const user = {
  name: "Hanako",
  age: 30
};

練習問題3.

練習問題1で保存したキー"username"のデータをローカルストレージから削除してください。

削除後、再度そのキーでデータを取得し、存在しないことを確認してください（nullが返るはずです）。

第13章 ローカルストレージ