增加计数器值并更新localStorage中的数据

Question

在localStorage中；计数器"；键包含一个JSON对象，其字段是计数器的名称，其值是计数器的数值。编写incrementCounter函数，该函数将传递counterName——计数器的名称作为第一个参数。

该函数的任务是将计数器Name计数器值增加1，并更新localStorage中的数据。LocalStorage可能包含无效的JSON，读取该JSON可能会导致错误。在这种情况下，函数应该写入新的数据，其中指定的计数器的值为1。最后，函数应该返回递增后的计数器值。

使用示例：

// in localStorage 1 counter: bannerClick = 5
incrementCounter('bannerClick'); // 6
incrementCounter('bannerClose'); // 1
// in localStorage 2 counter: bannerClick = 6, bannerClose = 1

帮助执行任务。我只知道如何解析

function incrementCounter(counterName){
const newObj = JSON.parse(localStorage.getItem('counters'))

但我不知道下一步该怎么办。解释如何一步一步地完成

Answer 1

function incrementCounter(counterName){
// Initialize a variable to store the counters object
let counters;
// Safely try to parse the data in localstorage
try {
counters = JSON.parse(localStorage.getItem("counters"));
} catch (er) {
// In case localstorage doesn't have a valid JSON make a new object
counters = {};
}
if(typeof counters[counterName] !== 'number'){
// if the counter is not initialized in the object, initialize it
counters[counterName] = 0;
}
// Now we can safely increment its value in the counters object
counters[counterName]++;
// Now that the value is updated, store it back in localStorage
localStorage.setItem("counters", JSON.stringify(counters));
// Return the updated value of the counter in question
return counters[counterName];
}

如果你在生产中使用这种方法，我建议你不要采用这种方法，因为访问localStorage是同步进行的，如果你经常这样做，这可能会减慢你的应用程序的速度。