如何移除localStorage中重复出现的单个特定数据实例

我懂你的困扰——现在点击移除按钮会把localStorage里所有相同的商品ID都清掉，这完全不符合购物车数量增减的逻辑。问题出在你用filter方法时，它会过滤掉所有匹配目标ID的元素，而我们只需要移除其中一个实例。

这里给你修改后的移除数量代码，刚好解决这个问题：

$(document).on('click', '.remove_qty', function () { 
    var split_class = this.className.split(' '); 
    var this_id = split_class[1]; 
    var cartItems = localStorage.getItem('teddy_id'); 
    cartItems = cartItems ? cartItems.split(',') : []; 
    
    // 找到数组中第一个匹配当前商品ID的索引
    const targetIndex = cartItems.indexOf(this_id);
    // 如果找到匹配项，仅删除这一个元素
    if (targetIndex !== -1) {
        cartItems.splice(targetIndex, 1);
    }
    
    localStorage.setItem('teddy_id', cartItems.toString()); 
});

改动说明 #

• indexOf(this_id)会返回数组中第一个和目标ID匹配的元素位置，没找到则返回-1
• splice(targetIndex, 1)方法从目标索引位置开始，仅删除1个元素——完美实现了“只移除一个对应ID”的需求，和你加号按钮添加单个ID的逻辑完全对应

另外，建议你去掉按钮上的onClick="window.location.reload()"，修改localStorage后可以手动更新页面上的数量显示，强制刷新页面会降低用户体验哦~

内容的提问来源于stack exchange，提问作者Boscher Audrey