localStorage に JavaScript 配列を保存および取得するにはどうすればよいですか?

localStorage: 配列ストレージのジレンマ

変数の保存に localStorage を利用する場合、その制限に注意することが重要です。通常の JavaScript とは異なり、localStorage は文字列のみを処理できます。これは、配列などの複雑なデータ構造を保存しようとするときに課題となります。

元のコードでは、配列を localStorage に直接割り当てようとしています。ただし、localStorage は文字列値を期待しているため、このアプローチは失敗します。この問題を解決するには、配列を文字列に変換する必要があります。

JSON から Rescue へ

JSON (JavaScript Object Notation) は、次のことを可能にするデータ交換形式です。オブジェクトと配列を文字列として表現できるようになります。 JSON.stringify() を使用すると、name 配列を JSON 文字列に変換できます。

var names = [];
names[0] = prompt("New member name?");
localStorage.setItem("names", JSON.stringify(names));

このコードは、name 配列を文字列として localStorage に正常に保存します。

取得と使用法

localStorage から配列を取得するときは、保存された JSON 文字列を、JSON.parse() を使用して配列に戻します。

var storedNames = JSON.parse(localStorage.getItem("names"));

これで、storedNames には、localStorage に保存された元の配列が含まれます。

あるいは、直接使用することもできます。 setItem() と getItem() をバイパスして、JSON 文字列を設定および取得するためのプロパティ アクセスメソッド:

localStorage.names = JSON.stringify(names);
var storedNames = JSON.parse(localStorage.names);

このメソッドはより簡潔な構文を提供しますが、古いブラウザではサポートされない可能性があることに注意してください。

以上がlocalStorage に JavaScript 配列を保存および取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。