【JavaScript】LocalStorageで複数データ扱いたい

はじめに

コジマです。

JavaScriptでLocalStorageを使いたいとき、getItem関数/setItem関数を使用します。
しかし、key-valueの形で1:1対応したデータしか使用できず、配列などの複数データはそのまま扱うことはできません。

そういう時は以下のように対応できます

実装

setItem関数

// Object
const params = { name: 'Taro', age: 20 };
// JSON文字列に変換
localStorage.setItem('params', JSON.stringify(params));

// Array
const elements = [10, 20, 30];
// JSON文字列に変換
localStorage.setItem('elements', JSON.stringify(elements));

getItem関数

// Object
// JSON文字列をJSONとして解析
const params = JSON.parse(
  localStorage.getItem('params')
);
console.log(params.name); // Taro

// Array
// JSON文字列をJSONとして解析
const elements = JSON.parse(
  localStorage.getItem('elements')
);
console.log(elements[1]); // 20

さいごに

複数データも１つの文字列にすればkey-valueが1:1を実現できるわけですね！

もっと学びたい人はこちら

JavaScriptをもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！

JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム

気になった人はぜひ見てみてくださいね！

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです！

以上、コジマでした。