SessionStorage.getitemでの配列要素の取得について

Question

#JavaScript/HTML/CSSについての質問です．
JavaScriptファイルで計算をして配列に値を代入してSessionStorage.setitemで保存した後，HTMLファイル側でSessionStorage.getitemで値を取得すると文字列として扱われてしまうため，数値に変換して計算ができるようにする方法を教えてください．

#実現したいこと
setitemで保存した
a[0, 10, 20, 30, 40, 50]
をgetitemで読み込んでconsole.log(a[1])を実行すると，実行結果が「,」になったり，console.log(a[3])を実行すると実行結果が「1」になってしまうため，getitemで取得しても
console.log(a[1])→10
console.log(a[3])→20
となるようににしたいです．

const N = 60;

  var a = 0,
    b = 0,
    ran,
    box_a = new Array();
  box_b = new Array();

  for (let i = 0; i < N; i++) {
    ran = Math.floor(Math.random() * 2);
    if (ran === 0) {
      box_a[a] = i + 1;
      a += 1;
    } else if (ran === 1) {
      box_b[b] = i + 1;
      b += 1;
    }
  }

  sessionStorage.setItem("num_a", box_a);
  sessionStorage.setItem("num_b", box_b);

<script>
var a = sessionStorage.getItem("num_a");
var b = sessionStorage.getItem("num_b");

console.log(a[1]);
</script>

Answer 1

文字列しか格納できないので、JSONにして保存すればよいです。

【localStorageで複数のデータを保存する ｜ Tips Note by TAM】
https://www.tam-tam.co.jp/tipsnote/javascript/post5978.html

Comments

[NaGuilty_]

sessionStorage.setItem("num_a", JSON.stringify(box_a));
として保存し，
var a = JSON.parse(storage.getItem('num_a'));
として値の取り出しを行いましたが，
Uncaught ReferenceError: storage is not defined
とエラーが発生してしまい，うまく表示されません．
どう解決したらよろしいでしょうか？

[kei344]

sessionStorage.setItemとして保存しているのだから storage.getItem ではなく sessionStorage.getItem では。
「Uncaught ReferenceError: ●● is not defined」は未定義の変数にアクセスしたときにおります。エラーから情報を得てください。

Answer 2

セキュリティ上、SessionStorageはなるべく使わないほうが良いと思うのですが。