如何在 Angular 8 中单击复选框时从本地存储中添加和删除值

How to add and remove values from local storage on checkbox click in Angular8

我有动态生成的复选框列表,我想用对象创建数组。

如果 value 为 true 并且 setItem 到 localStorage,我想将数据推送到对象数组中, 如果 value 为 false,那么它将从本地 storage

中删除对象

任何人都可以帮助我优化我的代码以获得预期的输出。

预期输出

[
  {
    "key": "Test",
    "value": true
  },
  {
    "key": "Test1",
    "value": true
  },
  {
    "key": "removeItem",
    "value": false
  }
]

代码

  setColumn($event, item) {
    var obj = {}, valueAliasPair = [];
    if (item.tabelHeader.data != '' && $event.checked === true) {
      obj['key'] = item.tabelHeader.data;
      obj['value'] = $event.checked;
      valueAliasPair.push(obj);
      localStorage.setItem('AvailableAmt', JSON.stringify(valueAliasPair));
    }
    if (item.tabelHeader.data != '' && $event.checked === false) {     
      localStorage.removeItem('AvailableAmt', obj['key']);
    }
    console.log(valueAliasPair, "valueAliasPair");
  }

更新:

setColumn($event, item) {
    let valueAliasPair = JSON.parse(localStorage.getItem("AvailableAmt") || "[]");

    if (item.tabelHeader.data != "") {
        if ($event.checked) {
        valueAliasPair.push({
            key: item.tabelHeader.data,
            value: true,
        });
        localStorage.setItem("AvailableAmt", JSON.stringify(valueAliasPair));
        } else {
        const ind = valueAliasPair.findIndex((x) => x.key === item.tabelHeader.data);
        valueAliasPair.splice(ind, 1);
        localStorage.setItem("AvailableAmt", JSON.stringify(valueAliasPair));
        }
    }

    console.log(valueAliasPair, "valueAliasPair");
}