Javascript localStorageに配列を保存する

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

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

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

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

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

上記の実行結果:

before: 2
after: 3

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

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

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

上記の実行結果

before: 2
after: 2

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

木曜日担当:nishida




アプリ関連ニュース

お問い合わせはこちら

お問い合わせ・ご相談はお電話、またはお問い合わせフォームよりお受け付けいたしております。

tel. 06-6454-8833(平日 10:00~17:00)

お問い合わせフォーム