JavaScript | 配列をローカルストレージで保存、取得する方法

2021-11-26JavaScript 配列,JavaScript

JavaScriptで配列データをサイトのコンテンツデータとしてローカルストレージに保存する方法を紹介しています。

このサンプルコードは配列・オブジェクト型のデータでも同様に扱えます。

配列をローカルストレージに保存する

配列データをローカルストレージで扱うには、配列をJSONデータに変換する必要があります。

まず、window.localStorageで端末・ブラウザがローカルストレージを扱える設定になっているかどうかを確認します。

ローカルストレージが有効の場合、JSON.stringify()メゾッドにて配列型をJson型に変換します。

変換したJSONデータをlocalStorage.setItem()メゾッドでローカルストレージに保存します。

let array = ['apple', 'banana', 'pine'];

if (window.localStorage) {
	let json = JSON.stringify(array, undefined, 1);
	localStorage.setItem('key_name', json);
}

配列をローカルストレージから取得する

保存されているJSONデータをローカルストレージから取得して、配列データに変換します。

まず、window.localStorageで端末・ブラウザがローカルストレージを扱える設定になっているかどうかを確認します。

ローカルストレージが有効の場合、localStorage.getItem()メゾッドで保存されているデータのキー名を指定してJSONデータを取得します。

取得したJSONデータをJSON.parse()にて配列、あるいはオブジェクト（連想配列）に変換して利用します。

if (window.localStorage) {
	let json = localStorage.getItem('key_name');
	let array = JSON.parse(json);
}

ローカルストレージに保存されているデータの削除

localStorage.removeItem()にて保存されているデータをキー名単位でローカルストレージから削除します。

if (window.localStorage) {
	localStorage.removeItem('key_name');
}

ローカルストレージに保存されているサイト・コンテンツのデータを一括で削除するにはstorage.clear()が利用できます。

if (window.localStorage) {
	storage.clear();
}