Javascript 如何在localstorage中保存多个单击计数器？

我有几个计数器，如何在存储中存储所有值？在这个例子中，这可能吗

我在这里创建了一个代码片段：

document.addEventListener（'click'，函数（事件）{
if（event.target.dataset.counter！=未定义）{
event.target.value++；
}
});
计数器：
另一个柜台：
另一个计数器：
document.addEventListener（'click'，函数（事件）{
if（event.target.dataset.counter！=未定义）{
event.target.value++；
window.localStorage.setItem（event.target.name、event.target.value）；
}
});
计数器：另一个计数器：和另一个计数器：
您可以为按钮提供ID，并使用对象将值存储为键值对（其中每个键都是对应于按钮的ID）。然后，在从
localStorage
存储和检索该对象时，可以使用
JSON.stringify（）
和
JSON.parse（）

例如，在堆栈片段中，
localStorage
不起作用

var clickStore=window.localStorage.getItem（'clickStore'）| |'{}；
clickStore=JSON.parse（clickStore）；
console.log（单击存储）；
Object.entries（clickStore.forEach）（[key，value]）=>{
var btn=document.querySelector（`${key}`）；
如果（btn）{
btn.value=值；
}
});
document.addEventListener（'click'，函数（事件）{
if（event.target.dataset.counter！=未定义）{
event.target.value++；
}
单击存储[event.target.id]=parseInt（event.target.value，10）；
log（JSON.stringify（clickStore））；
window.localStorage.setItem（'clickStore'，JSON.stringify（clickStore））；
});
一种方法是在内存中设置一个对象，然后在更新任何计数器时更新该对象

工作示例：


//抓取数据计数器按钮
const dataCount=document.getElementsByClassName（'data-count'）[0]；
const dataCounters=[…document.querySelectorAll（“[数据计数器]”）]；
//初始化dataCountObject
让dataCountObject={}；
dataCounters.forEach（（dataCounter，i）=>{
dataCountObject['dataCounter'+i]=parseInt（dataCounter.value）；
});
console.log（dataCountObject）；
//同时递增dataCounter和dataCountObject
常量递增计数=（事件）=>{
if（event.target.dataset.counter！=未定义）{
让index=dataCounters.indexOf（event.target）；
dataCountObject['dataCounter'+索引]++；
event.target.value++；
console.log（dataCountObject）；
}
}
//将事件侦听器附加到dataCount
dataCount.addEventListener（'click'，incrementCount，false）

柜台：
另一个柜台：
另一个柜台：
要缓存单击一次后的所有计数，还是要缓存当前单击的计数？我要缓存当前的单击数以保存本地存储谢谢！但是，当id=“counter1”和id=“counter2”与此按钮具有相同的类时，我如何使用它呢？您需要某种唯一的引用，否则将难以为每个按钮分配值。按钮的数量将来可能会改变，因此仅基于类或数据属性的每个元素的索引将不起作用。是的，谢谢，但我不知道如何在这段代码中实现localstorage…请参阅上面答案的最后一行。就这么简单。不幸的是，刷新页面后保存数据对我不起作用…你使用的是哪种浏览器？Chrome。。。这是一个密码