JavaScriptで配列をlocalStorageに保存するコード例

JavaScriptでlocalStorageに配列を保存する方法

JavaScriptでは、localStorageを使用してブラウザのローカルストレージにデータを保存することができます。配列も同様に保存することができます。

配列をJSON文字列に変換する

配列を直接保存することはできません。そのため、まずJSON文字列に変換します。JSONは、JavaScriptオブジェクトや配列をテキスト形式で表現する標準的なフォーマットです。

const myArray = ["apple", "banana", "orange"];
const jsonStr = JSON.stringify(myArray);

JSON文字列をlocalStorageに保存する

localStorage.setItem()メソッドを使用して、JSON文字列をキーと値のペアとして保存します。

localStorage.setItem("myArray", jsonStr);

localStorageからJSON文字列を取得する

localStorage.getItem()メソッドを使用して、キーからJSON文字列を取得します。

const storedJsonStr = localStorage.getItem("myArray");

JSON文字列を配列に変換する

取得したJSON文字列を、JSON.parse()メソッドを使用して元の配列に変換します。

const retrievedArray = JSON.parse(storedJsonStr);

完全なコード例:

const myArray = ["apple", "banana", "orange"];

// 配列をJSON文字列に変換して保存
localStorage.setItem("myArray", JSON.stringify(myArray));

// localStorageからJSON文字列を取得して配列に変換
const storedJsonStr = localStorage.getItem("myArray");
const retrievedArray = JSON.parse(storedJsonStr);

console.log(retrievedArray); // ["apple", "banana", "orange"]

const myArray = ["apple", "banana", "orange"];

// 配列をJSON文字列に変換して保存
localStorage.setItem("myArray", JSON.stringify(myArray));

• myArray: 保存したい配列です。
• JSON.stringify(myArray): 配列をJSON文字列に変換します。
• localStorage.setItem("myArray", ...): キー"myArray"と値（JSON文字列）をlocalStorageに保存します。

// localStorageからJSON文字列を取得
const storedJsonStr = localStorage.getItem("myArray");

// JSON文字列を配列に変換
const retrievedArray = JSON.parse(storedJsonStr);

• localStorage.getItem("myArray"): キー"myArray"に対応する値（JSON文字列）を取得します。
• JSON.parse(storedJsonStr): JSON文字列を配列に変換します。

完全なコード例

const myArray = ["apple", "banana", "orange"];

// 配列をJSON文字列に変換して保存
localStorage.setItem("myArray", JSON.stringify(myArray));

// localStorageからJSON文字列を取得して配列に変換
const storedJsonStr = localStorage.getItem("myArray");
const retrievedArray = JSON.parse(storedJsonStr);

console.log(retrievedArray); // ["apple", "banana", "orange"]

localStorage.setItem()の代わりにlocalStorage[key]を使用する

const myArray = ["apple", "banana", "orange"];
const key = "myArray";

// 配列をJSON文字列に変換して保存
localStorage[key] = JSON.stringify(myArray);

// localStorageからJSON文字列を取得して配列に変換
const retrievedArray = JSON.parse(localStorage[key]);

この方法では、localStorage.setItem()の代わりに、localStorageをオブジェクトのように扱ってキーと値を直接設定します。

localStorage.setItem()とlocalStorage.getItem()の代わりにJSON.stringify()とJSON.parse()を使用する

const myArray = ["apple", "banana", "orange"];
const key = "myArray";

// 配列をJSON文字列に変換して保存
localStorage.setItem(key, JSON.stringify(myArray));

// localStorageからJSON文字列を取得して配列に変換
const retrievedArray = JSON.parse(localStorage.getItem(key));

localStorage.setItem()とlocalStorage.getItem()の代わりにlocalStorage.setObject()とlocalStorage.getObject()を使用する

const myArray = ["apple", "banana", "orange"];
const key = "myArray";

// 配列をlocalStorageに保存
localStorage.setObject(key, myArray);

// localStorageから配列を取得
const retrievedArray = localStorage.getObject(key);

この方法では、localStorage.setObject()とlocalStorage.getObject()というカスタム関数を使用して、配列を直接保存および取得します。これらの関数は、内部でJSON.stringify()とJSON.parse()を使用しています。

注意:

• localStorage.setObject()とlocalStorage.getObject()は、自分で実装する必要があります。
• これらの関数は、ブラウザのサポート状況やセキュリティ上の考慮事項に注意する必要があります。