【jQuery】websseionで一つのキーに複数の値を動的に持たせる方法

webstrageを使って複数のボタンの状態を管理するときにkeyをいくつも用意するの面倒だから、キー一つに対して複数の値を動的に追加削除したいなぁって思った時の備忘録

必要なもの

一つのキーに対して複数の値を登録と取得する際にjsonデータに置き換えたりjsonデータから配列として扱えるように変換する必要性があったのでメモ

// webstrageに登録するとき
sessionStorage.setItem('data_list', JSON.stringify(data_list));

JSON.stringify()でjsonで扱える文字列にする必要性があるみたい

// webstrageから取得するとき
JSON.parse(sessionStorage.getItem('data_list'));

JSON.parse()でjsonデータをjavascriptオブジェクトに変換してる

今回は上記の2点が重要だった
以下参考記事

一つのキーに対して複数の値を動的に追加削除するコード

if (sessionStorage.getItem('data_list') != null) { //webstrageがある時
  var data_object = JSON.parse(sessionStorage.getItem('data_list'));
  var data_list = data_object;
  console.log(data_list);
  Object.keys(data_list).forEach(function (key) { //webstrageにある値からボタンにclass="active"を付与
    $('.btns a[data-category="' + key + '"]').addClass('active');
    var val = this[key]; // value:activeを取得できる
    console.log(key); // key:diary,web,manga,studyいずれか取得
  }, data_list);
} else { //webstrageがない時
  var data_list = {}; //連想配列を入れるための変数
}

$('.btns a').click(function (event) {
  event.preventDefault();
  if ($(this).is('[data-category]')) { //クリックしたリンクがカスタムデータ属性を持っているかどうか判別
    var name = $(this).data("category"); //data-categoryに設定している値を取得
    if (data_list[name]) { //連想配列の中に同名のkeyが存在している時
      $(this).removeClass('active');
      delete data_list[name]; //連想配列から同名のkeyとvalueを削除
      console.log(data_list);
      sessionStorage.setItem('data_list', JSON.stringify(data_list)); //連想配列をwebstrageに再登録
    } else { //連想配列の中に同名のkeyが存在していない時
      $(this).addClass('active');
      data_list[name] = 'active'; //連想配列にkeyとvalueを追加
      console.log(data_list);
      sessionStorage.setItem('data_list', JSON.stringify(data_list)); //webstrageに追加
    }
  }
});

webstrageの一つのキーに対して複数の値を動的に追加削除するという方法で連想配列を一つ用意してボタンがクリックされたら都度webstrageに再登録する形で動的に追加削除するようにしてみた

以上
ここから個人的なメモ

中括弧{}を変数に代入すると連想配列？

配列の箱を用意するときに、通常の配列と連想配列って書き方が違うみたいね

//連想配列の書き方
var data_list = {}

//通常の配列の書き方
var data_list = []

初めて知ったわ

foreachで取得しようと思ったら思ったより面倒くさかった

今回用意したコードでも使っているけど、
これ、別で一本でやった方が良いかも
連想配列のforeachは結構面倒くさいわ

参考記事だけ載せておく