如何计算和更改我的本地存储 js 中的特定值

Question

我有一个代码，我可以在其中在本地存储中添加、显示和删除对象及其工作，但每当我尝试更新特定对象，它会覆盖所有内容，而不仅仅是更改我想要的特定对象

我的代码

$(".qty-val-ls").on("change", function() {
    let record = localStorage.getItem("guestCart");
    let index = $(this).attr("id");
    if(record == null)
    {
        recordObj = [];
    }else{
        recordObj = JSON.parse(record);
    }
    recordObj[index].price = $(this).val() * parseInt(recordObj[index].price);
    
    localStorage.setItem('guestCart', recordObj[index].price); 
})

我的输入

 <input type="number" class="qty-val-ls" min="1" id="${index}" value="4000" onChange="">

这里的${index}是本地存储中的id，jquery中的index是对象在本地存储中的编号，它从 0、1、2 等开始

我的阵列（本地存储中的对象）

[{"id":"11","name":"Rts 512GB USB Flash Drive Pendrive Memory USB 3.0","price":"3000","img":"newusb.png","qty":1},
{"id":"10","name":"MP3 Music Player Audio Player -Black","price":"5000","img":"mp3.png","qty":1},
{"id":"5","name":"Blue Louis Vuitton Women Bag","price":"10000","img":"newbag.png","qty":1},
{"id":"1","name":"Samsung Galaxy S9 6gb ram, 32gb rom, 16mpbs","price":"100000","img":"newphone.png","qty":1}]

请问我如何在计算后更改值并能够将其放回应有的位置

编辑：我已经检查了有关 stackoverflow 的其他类似问题，但似乎没有一个有效

Answer 1

我将尝试解释 cmets 中的内容并给出一个好的方法。首先，您使用recordObj[index].price 而不是完整的recordObj 覆盖localStorage 中的存储对象。但是，正如您所说，存储recordObj 然后获取它的值会给出"[object Object]"，因为它被解析为字符串。考虑到我所说的在访问 items 属性时要小心，因为它尚不存在，这段代码应该适合你：

$('.qty-val-ls').on('change', function onChange() {
    const record = localStorage.getItem('guestCart');
    const recordObj = record ? JSON.parse(record) : [];
    const index = $(this).attr('id');
    if (recordObj[index]) {
        recordObj[index].price = $(this).val() * parseInt(recordObj[index].price, 10);
    }
    localStorage.setItem('guestCart', JSON.stringify(recordObj)); 
});

更详细地解释我所做的事情：

1. 获取 localStorage 项。
2. 如果存在则用JSON.parse解析它，因为它是字符串化的；如果不存在，则将其初始化为空数组。
3. 如果在给定索引处存在项目，请根据需要设置价格。我还将 radix 参数添加到 parseInt，因为这是一个很好的做法，我习惯于遵循 ESLint 规则 (https://eslint.org/docs/rules/radix)
4. 最后，存储修改（或未修改）和字符串化的数组。