Javascript localStorageに配列を保存する

ホーム
アプリ関連ニュース
Web Service
Javascript localStorageに配列を保存する

2019年9月19日
Web Service

画面内の各UIの設定状況をページリロード後も復元させる必要があり、
いったんlocalStorageに設定状況の保存をおこない、復元時に
localStorageから取り出した設定情報を反映させる、
という手順で検討していました。

以下の点を注意しないとうまくいかなかったので、
注意点と解決策を共有したく思います。

当初、下記の方法で検討していました。

//設定状況を配列に保存します。
var grstatus = [0,1];

//localStorageに保存します。
localStorage.setItem('grstatus', grstatus);

//ページリロード時の処理
//localStorageから取り出し
var grstatus2 = localStorage.getItem('grstatus');

//grstatus2の配列情報を元にページ設定状況を復元

以上の設定方法ではうまくいきませんでした。

localStorageへの保存とlocalStorageからの取り出しは
無事、おこなえているのですが
以下のコードで、console.logで出力して原因を確認したところ、
「localStorageに保存する前の配列の長さ」と
「localStorageから取り出した際の配列の長さ」が異なっていることが
わかりました。

//設定状況を配列に保存します。
var grstatus = [0,1];

//配列の長さを確認(before)
console.log("before: "+grstatus.length);

//localStorageに保存します。
localStorage.setItem('grstatus', grstatus);

//ページリロード時の処理
//localStorageから取り出し
var grstatus2 = localStorage.getItem('grstatus');

//配列の長さを確認(after)
console.log("after: "+grstatus2.length);

//grstatus2の配列情報を元にページ設定状況を復元

上記の実行結果：

before: 2
after: 3

localStorageから取り出したあとは配列の長さがひとつ増えていました。
カンマ(,)区切りの配列として認識されていないようです。

この問題を解決するためには、いったんJSONフォーマットに変換して保存をおこない、
取り出し時にもJSONフォーマットから配列に変換する必要があります。

以下が修正版のコードです。

//設定状況を配列に保存します。
var grstatus = [0,1];

//配列の長さを確認(before)
console.log("before: "+grstatus.length);

//JSON.stringifyした上で、localStorageに保存します。
localStorage.setItem('grstatus', JSON.stringify(grstatus));

//ページリロード時の処理
//localStorageから取り出し
var grstatus2 = localStorage.getItem('grstatus');

//取り出した後にJSON.parseをかけます。
grstatus2 = JSON.parse(grstatus2);

//grstatus2の配列情報を元にページ設定状況を復元

//配列の長さを確認(after)
console.log("after: "+grstatus2.length);

上記の実行結果

before: 2
after: 2

これで正しく動作しました。

木曜日担当:nishida