クッキー（cookie）よりも比較的大容量のデータが保存できて便利なローカルストレージ（local storage）ですが、配列をそのまま保存しようとすると、なかなかうまくいきません。いったいどうなってしまうのでしょうか？
ローカルストレージに配列を保存しようとしたときの検証結果と解決方法について説明していきます。
スポンサーリンク
ローカルストレージに配列を保存すると？
javascript 上でローカルストレージに配列を保存すると、どのなのでしょうか。次のようなプログラムで検証してみました。
プログラム：
// 配列の宣言
var before_array = [1, 2, 3, 4, 5];
// 宣言した配列をローカルストレージに格納
localStorage.setItem('array_1', before_array);
// ローカルストレージに格納した配列を取得して変数に格納
var after_array = localStorage.getItem('array_1');
// ローカルストレージに格納前の配列をログに表示
console.log(before_array);
// ローカルストレージに格納して取得した配列？をログに表示
console.log(after_array);
// ローカルストレージ格納前の変数が配列かどうかを確認
console.log('before_array: ' + Array.isArray(before_array));
// ローカルストレージから取得した変数が配列かどうかを確認
console.log('after_array: ' + Array.isArray(after_array));実行結果：
Array(5)
1,2,3,4,5
before_array: true
after_array: falseプログラム解説
配列を宣言して、それをローカルストレージに保存します。それをローカルストレージから取り出した後、配列として機能するのかどうかを確認しております。
ローカルストレージに保存する場合は、localStorage.setItem を使用します。第１引数には「（取り出すときの）キーの名前」、第２引数には「保存する値」を設定します。
今回は、プログラムの１行目で宣言した配列をローカルストレージに保存しております。
ローカルストレージから値を取得する場合は、localStorage.getItem を使用します。第１引数には、「キーの名前」を設定します。
今回は一度保存した配列（before_array）を取得して、変数（after_array）に格納しております。
Array.isArray メソッドを使用することによって、引数に指定した変数が配列かどうかを確認することができます。変数が配列の場合は「true」、そうでない場合は「false」を返却します。
今回の場合、ローカルストレージに保存した配列を取り出したとき、配列ではなくってしまっていることがわかります。
変数（after_array）をそのままログ表示すると、配列に設定した値は表示されるので、配列から恐らく文字列に置き換わってしまっているようです。
ローカルストレージに配列を保存する方法
ではローカルストレージに配列を保存することは不可能なのかというと、そうでもありません。JSONを使用することで、上記の現象を回避することができます。
プログラム：
var before_array = [1, 2, 3, 4, 5];
// 配列をJSONの文字列に変換してローカルストレージに格納
localStorage.setItem('array_1', JSON.stringify(before_array));
// ローカルストレージに格納したJSON文字列を配列に変換して変数に格納
var after_array = JSON.parse(localStorage.getItem('array_1'));
console.log(before_array);
console.log(after_array);
console.log('before_array: ' + Array.isArray(before_array));
console.log('after_array: ' + Array.isArray(after_array));実行結果：
Array(5)
Array(5)
before_array: true
after_array: trueプログラム解説
JSON.stringify メソッドは引数に指定した配列をJSON形式の文字列に変換してくれます。ローカルストレージに保存する前にJSON形式にしておく必要があります。
JSON.parse メソッドは、引数で指定した「JSON形式の文字列」を配列に変換してくれます。
まとめ
配列をそのままローカルストレージに保存しようとすると、なぜか文字列に置き換わってしまうことがわかりました。
この現象を回避するためには、配列をJSON形式に変換してから、ローカルストレージに保存すれば、配列の形式を保持することができます。
コメント