JavaScriptのローカルストレージで配列・オブジェクトを管理する方法！初心者でも簡単に理解できる

1. ローカルストレージとは？

1. ローカルストレージとは？

ローカルストレージは、ブラウザが提供するデータ保存領域です。ユーザーがページを閉じてもデータが残り、再度アクセスしたときに同じデータを利用できます。容量はブラウザによって異なりますが、一般的に5MB程度まで保存可能です。データは文字列として保存されるため、数値やオブジェクトを扱う場合は変換が必要です。

2. 配列をローカルストレージに保存する

2. 配列をローカルストレージに保存する

JavaScriptで作った配列をそのまま保存することはできません。JSON.stringifyを使って文字列に変換して保存します。

let fruits = ["りんご", "みかん", "バナナ"];
localStorage.setItem("fruits", JSON.stringify(fruits));

このコードでは、配列 fruits を文字列に変換して fruits という名前で保存しています。

3. 保存した配列を取り出す方法

3. 保存した配列を取り出す方法

保存した配列を取り出すときは JSON.parse を使って文字列を配列に戻します。

let storedFruits = localStorage.getItem("fruits");
let fruitsArray = JSON.parse(storedFruits);
console.log(fruitsArray); // ["りんご", "みかん", "バナナ"]

これで保存した配列を元通りに利用できます。

4. オブジェクトをローカルストレージに保存する

4. オブジェクトをローカルストレージに保存する

オブジェクトも配列と同じように JSON.stringify で文字列に変換して保存します。

let user = {
  name: "山田太郎",
  age: 25,
  email: "taro@example.com"
};
localStorage.setItem("user", JSON.stringify(user));

オブジェクトの中の情報も文字列として保存できるので、後で取り出すときも簡単です。

5. 保存したオブジェクトを取り出す

5. 保存したオブジェクトを取り出す

保存したオブジェクトを取り出すときも JSON.parse を使います。

let storedUser = localStorage.getItem("user");
let userObj = JSON.parse(storedUser);
console.log(userObj.name); // "山田太郎"
console.log(userObj.age);  // 25

これでオブジェクトの情報をそのままJavaScriptで利用できます。

6. 配列に新しいデータを追加して保存する

6. 配列に新しいデータを追加して保存する

既存の配列に新しいデータを追加して再度保存することもできます。

let fruitsArray = JSON.parse(localStorage.getItem("fruits"));
fruitsArray.push("ぶどう");
localStorage.setItem("fruits", JSON.stringify(fruitsArray));
console.log(fruitsArray); // ["りんご", "みかん", "バナナ", "ぶどう"]

このようにローカルストレージは一度保存したデータを更新することも簡単です。

7. データを削除する方法

7. データを削除する方法

ローカルストレージのデータを削除したいときは removeItem を使います。

localStorage.removeItem("fruits"); // fruitsデータを削除
localStorage.removeItem("user");   // userデータを削除

全てのデータを一括で消したい場合は localStorage.clear() を使うこともできます。

8. ローカルストレージの注意点

8. ローカルストレージの注意点

ローカルストレージは便利ですが、次の点に注意してください。

• 容量はブラウザによって制限されている（一般的に5MB程度）
• ユーザーがブラウザの設定で削除する可能性がある
• 文字列として保存されるため、オブジェクトや配列は JSON.stringify と JSON.parse を必ず使用する
• セキュリティの観点から、重要なパスワードなどは保存しない

9. まとめの前に確認しよう

9. まとめの前に確認しよう

これまで見てきたように、ローカルストレージを使えばブラウザ上で配列やオブジェクトを簡単に管理できます。保存・取り出し・更新・削除の流れを理解しておくと、Webアプリケーションの状態管理がスムーズになります。特に JSON.stringify と JSON.parse の使い方をマスターすることが重要です。

まとめ

まとめ

本記事では、JavaScriptでブラウザのローカルストレージを使って配列やオブジェクトを管理する方法を詳しく解説しました。ローカルストレージはWebアプリケーションにおいて、ユーザーのデータをブラウザ上に永続的に保存できる便利な仕組みです。特に、配列やオブジェクトはそのまま保存できないため、JSON.stringifyで文字列に変換し、保存後にJSON.parseで元のデータに戻す流れを理解することが重要です。また、既存の配列に新しいデータを追加して更新したり、保存したデータを削除する方法も学びました。

さらに、ローカルストレージを扱う際の注意点として、容量制限やユーザーによるデータ削除の可能性、セキュリティの観点から重要情報の保存を避けることが挙げられます。これらを正しく理解することで、安全かつ効率的にデータ管理が可能です。今後は、保存したデータをWebアプリケーションの状態管理やフォームの自動入力、ユーザー設定の保持などに活用できます。以下に簡単なサンプルとして、配列を更新しつつ保存・取り出す例を示します。

 // 配列を取得して更新 let fruits = JSON.parse(localStorage.getItem("fruits")) || []; fruits.push("キウイ"); // 更新した配列を保存 localStorage.setItem("fruits", JSON.stringify(fruits)); // 保存したデータを確認 let updatedFruits = JSON.parse(localStorage.getItem("fruits")); console.log(updatedFruits); // ["りんご", "みかん", "バナナ", "ぶどう", "キウイ"]

このように、ローカルストレージを活用するとユーザーが操作したデータをブラウザに残すことができ、再訪問時に即座にデータを復元することが可能です。特に、JSON.stringifyとJSON.parseの組み合わせをマスターすることで、配列やオブジェクトなど複雑なデータ構造も効率的に扱えます。

Webアプリケーションの開発では、フォームの入力内容を保存して次回表示時に自動補完する、ショッピングカートの内容を保持する、ユーザーの設定情報をローカルに保存するなど、多くの場面でローカルストレージが活用されます。データの保存と復元の流れを理解することで、よりユーザーにとって便利なインタラクティブなWeb体験を提供できます。