时间戳

首页 > 解决方案 > 通过多个按钮删除本地存储元素

javascript - 通过多个按钮删除本地存储元素

问题描述

所以我使用 localStorage 将按钮添加到我的 html 页面。单击按钮时，我希望删除相应的 localStorage 条目。

到目前为止我的代码：

for(let i=0;i<localStorage.length;i++)
    {
        var rem=document.createElement("button");
        rem.innerHTML='<i class="fa fa-trash-o" aria-hidden="true"></i>';
        rem.setAttribute('background-color','white');
        rem.setAttribute('id',localStorage.key(i));
        rem.setAttribute('class','delbuttons');
        document.body.appendChild(rem);
    }

因此，如果单击具有特定 id 的按钮，我希望删除 localStorage 中的相应键。我想要所有按钮的onclick。到目前为止，我想到的是：

var delb=document.getElementsByClassName("delbuttons").addEventListener("click",del);

function del()
{
    localStorage.removeItem('key');
}

我被困在这里，我不知道如何进一步进行。我可以使用其他方法（jQuery 也很好！）

标签： javascripthtmlevent-handlinglocal-storage

解决方案

编辑：

API getElementsByClassName返回一个 dom 的集合，你必须在真实的​​ dom 上绑定监听器，例如

Array.from(document.getElementsByClassName('delbuttons')).forEach(btn => btn.addEventListener('click', del))

看起来你被这个话题困住了：如何获取现在点击的按钮的 id ？

这里有几条知识。

  1. 事件侦听器（在您的代码中是函数“del”）将接收一个事件对象作为参数。重要属性之一是target指示确切的 dom（在您的代码中是您刚刚单击的按钮）。

  2. dom API getAttribute访问定义的属性，例如按钮的 id

所以我们最终得到了一个新版本的 del 监听器。

    function del(event) {
      var id = event.target.getAttribute('id'); //or. var id = event.target.id
      localStorage.removeItem(id);
    }

推荐阅读