この記事の最終更新日: 2023年2月21日
localStorageに配列を保存し、取り出す方法
JavaScriptを使用する際に、ローカルストレージに配列を保存することで、配列を永続化することができ、再度使用する際に配列を再作成する手間を省くことができます。
以下にlocalStorageに配列を保存し、取り出す方法を解説します。
配列をlocalStorageに保存する
ローカルストレージに配列を保存するには、配列をJSON文字列に変換してから、localStorage.setItem()
メソッドを使用します。
const array = [1, 2, 3];
const serializedArray = JSON.stringify(array);
localStorage.setItem('myArray', serializedArray);
ここで、配列array
をシリアル化し、myArray
というキー名でローカルストレージに保存しています。
localStorageから配列を取り出す
保存した配列を取り出すには、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()
メソッドを使用して、配列に戻しています。

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