【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形式で保存。配列で取得する方法について紹介しました。