【JavaScript】ローカルストレージに配列を保存しよう！基本的な使い方を解説【localStorage】

この記事の最終更新日: 2023年2月21日

localStorageに配列を保存し、取り出す方法

JavaScriptを使用する際に、ローカルストレージに配列を保存することで、配列を永続化することができ、再度使用する際に配列を再作成する手間を省くことができます。

以下にlocalStorageに配列を保存し、取り出す方法を解説します。

ローカルストレージに配列を保存するには、配列をJSON文字列に変換してから、localStorage.setItem()メソッドを使用します。

const array = [1, 2, 3];
const serializedArray = JSON.stringify(array);
localStorage.setItem('myArray', serializedArray);

ここで、配列arrayをシリアル化し、myArrayというキー名でローカルストレージに保存しています。

保存した配列を取り出すには、localStorage.getItem()メソッドを使用して、ローカルストレージからJSON文字列を取得し、JSON.parse()メソッドを使用して、配列に戻します。

const serializedArray = localStorage.getItem('myArray');
const array = JSON.parse(serializedArray);
console.log(array); // [1, 2, 3]

ここで、ローカルストレージからmyArrayというキー名のJSON文字列を取得し、JSON.parse()メソッドを使用して、配列に戻しています。

大阪のエンジニアが書いているブログ。