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
nishida at 2019年09月19日 10:00:25