Written by Kasumi

【JavaScript】Local Storageに複数のデータをJSON形式で保存。配列で取得する方法

Local Storageに複数のデータを一つのキーとしてJSON形式で保存。

配列で取得したい。

本記事ではこのような悩みを解決。

実装サンプルを元に解説します。

Local Storageの役割について解説した記事はこちら
https://kasumiblog.org/javascript-localstorage/

実装サンプル

See the Pen
ローカルストレージに複数のデータを保存
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

三つあるテキストフィールドにそれぞれ文字列を入力。

保存ボタンを押したら入力されたフィールド分だけLocal Storageに保存されます。

読込ボタンを押すと、Local Storageに複数保存されてるデータをリストで表示します。

実装方法は以下の通りです。

実装コード

// 保存
function save() {
  const val1 = document.querySelector('.txt1').value;
  const val2 = document.querySelector('.txt2').value;
  const val3 = document.querySelector('.txt3').value;
  // 配列を定義
  const data = { key1: val1, key2: val2, key3: val3 };
  // 配列をJSON形式に変換してからlocalstorageに保存
  localStorage.setItem("data", JSON.stringify(data));
}      

// 読込
function load() {
  const display = document.querySelector(".display");
  // localstorageに保存したデータ(配列)を取得
  const data = JSON.parse(localStorage.getItem("data"));
  // localstorageに保存したデータを表示
  Object.keys(data).forEach(element => {
    var displayChild = document.createElement('li');
    displayChild.textContent = data[element];
    display.appendChild(displayChild);
  });
}

Local Storageに複数のデータを保存・配列で取得するコード例です。

コードの詳細は以下の通りです。

JSON文字列に変換

// 保存
function save() {
  // 配列を定義
  const data = { key1: データ01, key2: データ02, key3: データ03 };
  // 配列をJSON形式に変換してからlocalstorageに保存
  localStorage.setItem("data", JSON.stringify(data));
}   

localStorageに複数のデータを保存するにはJSON形式にする必要があります。

まず最初に、配列を定義して保存したい複数のデータを格納

localStorage.setItemを定義。

第一引数に任意のキー値を設定(取得時に使います)。

第二引数にJSON.stringify(上記で定義した配列の変数)を設定します。

以上でJSON形式で複数のデータをlocalStorageに保存できました。

JSONを配列に変換。データを取得

// 読込
function load() {
  const display = document.querySelector(".display");
  // localstorageに保存したデータ(配列)を取得
  const data = JSON.parse(localStorage.getItem("data"));
  // localstorageに保存したデータを表示
  Object.keys(data).forEach(element => {
    console.log(data[element]);
  });
}

最後にlocalStorageに保存された複数のデータを取得します。

JSON.parse(localStorage.getItem(“定義したキー値”))を記述。

JSON形式をJavaScriptで扱える配列オブジェクトに戻します。

forEachを使って、上記配列から複数のデータを取得できたら成功です。

まとめ

JavaScriptでLocal Storageに複数のデータをJSON形式で保存。配列で取得する方法について紹介しました。

目次

関連記事

JavaScript

【簡単】JavaScriptを使ってhtmlタグを取得し、値を出力・書き換える方法

更新日:2022.09.09
219
JavaScript

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
264
JavaScript

JavaScriptでスマホ画面をタップした時のイベントを検知する方法

2022.11.15
404
JavaScript

JavaScriptを使い、目次をプラグイン無しで自動生成する方法

2022.10.31
221