如何用JS修改LocalStorage指定条目而非覆盖整个数组

我正在给LocalStorage中的商品列表做编辑页面，但修改当前条目时，整个数组都会被改动，不是只改我编辑的那一行。相关代码如下，求解决办法：

原JS代码 #

$(document).ready(function() {

products = JSON.parse(localStorage.getItem('products')) || [];

const product = {
  id: 1,
  pName: 'Iphone 14 Pro Max',
  pNumber: 'Serial-C2',
  pColor: 'Deep Purple',
  plPrice: 4300,
  done: false,
  createdAt: new Date().toLocaleString('ka-GE')
}

    let pasucc = products.push(product);
    localStorage.setItem('products', JSON.stringify(products));

    DisplayProducts();

    /*add object to localstorage*/
    products = JSON.parse(localStorage.getItem('products')) || [];
    
    const addForm = document.querySelector('#add-form');
    
    addForm.addEventListener('submit', e => {
    e.preventDefault();
    
    const pName = e.target.elements.pName.value;
    const pNumber = e.target.elements.pNumber.value;
    const pColor = e.target.elements.pColor.value;
    const plPrice = e.target.elements.plPrice.value;
    
    const product = {
    id: products.length + 1,
    pName: pName,
    pNumber: pNumber,
    pColor: pColor,
    plPrice: plPrice,
    done: false,
    createdAt: new Date().toLocaleString('ka-GE')
    }
    
    if (plPrice > 10000) {
    return toastr.warning('the field List Price must be between 1 and 10000');
    } else if (plPrice <= 0) {
    return toastr.warning('the field List Price must be between 1 and 10000');
    }
    
    let pasucc = products.push(product);
    localStorage.setItem('products', JSON.stringify(products));
    
    if (pasucc = true) {
    toastr.success('Product Added Successfuly !');
    }
    // Reset the form
    e.target.reset();
    
    });
    
    /*this is how i try to update current object in localstorage*/
    
    products = JSON.parse(localStorage.getItem('products')) || [];
    const clickedId = localStorage.getItem('clickedId') || '';
    const editForm = document.getElementById("edit-form");
    
    
    products.forEach(product => {
    if (clickedId == product.id) {
    editForm.innerHTML = `
    <input type="text" id="pName" class="form-control" value="${product.pName}" required>
    <input type="text" id="pNumber" class="form-control" value="${product.pNumber}" required>
    <input type="text" id="pColor" class="form-control" value="${product.pColor}" required>
    <input type="number" id="plPrice" class="form-control" value="${product.plPrice}">
    <button class="btn btn-success" type="submit">Save Changes</button>
    <a href="index.html" class="btn btn-danger" >Go Back</a>
    `;
    }
    
    });
    
    
    products.forEach(product => {
    
    editForm.addEventListener('submit', e => {
    e.preventDefault();
    
    const pNameVal = editForm["pName"];
    const pNumberVal = editForm["pNumber"];
    const pColorVal = editForm["pColor"];
    const plPriceVal = editForm["plPrice"];
    
    const pName = pNameVal.value;
    const pNumber = pNumberVal.value;
    const pColor = pColorVal.value;
    const plPrice = plPriceVal.value;
    
    var newProduct = {
    id: product.id,
    pName: pName,
    pNumber: pNumber,
    pColor: pColor,
    plPrice: plPrice,
    done: product.done,
    createdAt: product.createdAt
    }
    
    var updatedProducts = products.slice();
    updatedProducts.push(newProduct);
    
    localStorage.setItem('products', JSON.stringify(newProduct));
    });
    
    });
    
    });

原HTML代码 #

<div class="productform">
  <h2>Edit Product Form</h2>
  <form id="edit-form">   
  </form>
</div>

问题分析 #

你的代码存在三个关键错误，导致编辑时整组数据异常：

• 重复绑定提交事件：在products.forEach循环内给editForm绑定submit事件，会为每个商品都绑定一次提交回调，提交时所有回调都会执行，导致数组被多次修改。
• 数组更新逻辑错误：用updatedProducts.push(newProduct)是往数组里添加新对象，而非替换原有的目标商品；最后还将单个newProduct存入LocalStorage，直接覆盖了整个商品数组。
• 未精准定位目标商品：提交时没有根据clickedId找到要编辑的商品，而是循环处理所有商品，导致逻辑混乱。

修复方案 #

修正后的核心代码如下（仅替换编辑部分的逻辑）：

$(document).ready(function() {
    // ... 保留原有添加商品等其他代码 ...

    /* 修复后的编辑逻辑 */
    products = JSON.parse(localStorage.getItem('products')) || [];
    const clickedId = localStorage.getItem('clickedId') || '';
    const editForm = document.getElementById("edit-form");

    // 填充编辑表单
    const targetProduct = products.find(product => product.id == clickedId);
    if (targetProduct) {
        editForm.innerHTML = `
        <input type="text" id="pName" class="form-control" value="${targetProduct.pName}" required>
        <input type="text" id="pNumber" class="form-control" value="${targetProduct.pNumber}" required>
        <input type="text" id="pColor" class="form-control" value="${targetProduct.pColor}" required>
        <input type="number" id="plPrice" class="form-control" value="${targetProduct.plPrice}">
        <button class="btn btn-success" type="submit">Save Changes</button>
        <a href="index.html" class="btn btn-danger" >Go Back</a>
        `;
    }

    // 只绑定一次提交事件
    editForm.addEventListener('submit', e => {
        e.preventDefault();

        // 获取表单值
        const pName = editForm["pName"].value;
        const pNumber = editForm["pNumber"].value;
        const pColor = editForm["pColor"].value;
        const plPrice = editForm["plPrice"].value;

        // 找到目标商品并更新属性
        const updatedProducts = products.map(product => {
            if (product.id == clickedId) {
                return {
                    ...product,
                    pName,
                    pNumber,
                    pColor,
                    plPrice
                };
            }
            return product;
        });

        // 将更新后的整个数组存入LocalStorage
        localStorage.setItem('products', JSON.stringify(updatedProducts));
        toastr.success('Product Updated Successfully!');
        // 可选择跳回列表页
        // window.location.href = "index.html";
    });
});

关键修复点： #

1. 使用find方法直接定位目标商品，替代循环遍历
2. 仅给editForm绑定一次submit事件，避免重复触发
3. 使用map方法生成新数组，替换目标商品的属性，而非添加新对象
4. 最终将完整的更新后数组存入LocalStorage，而非单个商品对象

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