刷新页面并添加新数据后，将新添加的数据替换为表中的旧数据[javascript]答案

【问题标题】：after refresh the page and add new data so newly added data is replaced with old data in the table [javascript]刷新页面并添加新数据后，将新添加的数据替换为表中的旧数据[javascript]
【发布时间】：2020-12-21 00:38:37
【问题描述】：

我正在使用 JavaScript 中的localstorage
这是我使用表格在表格中输入productDetails 的代码。当我在表中输入productDetails 并刷新页面时，由于localStorage，输入的数据在表中。但我的问题是，当我刷新页面并再次添加新数据时，新添加的数据将替换为刷新页面之前添加的数据。我想要我的所有数据而不是替换

let productDetails = {

};

/**
 * this function is for get the value from form
*/
function getValue() {
    let id = document.getElementById('productId').value;
    let partNo = document.getElementById('productNo').value;
    let productName = document.getElementById('productName').value;
    let size = getRadioValue();
    let color = getCheckBoxValue();
    let description = document.getElementById('description').value;
    let date = document.getElementById('date').value;
    let address = document.getElementById('address').value;
    let companyName = document.getElementById('companyName').value;
    return {
        id, partNo, productName, size, color, description, date, address, companyName
    };
}

/**
 * function to insert data into table
 */
function insertion() {
    let value = getValue();
    
    let letter = value.productName[0];
    
    if (!productDetails.hasOwnProperty(letter)) {
        productDetails[letter] = [];
    }
    let object = {
        weight: value.weight, id: value.id, partNo: value.partNo, productName: value.productName, size: value.size, color: value.color, description: value.description,
        companyDetails: {
            date: value.date,
            address: value.address,
            companyName: value.companyName
        }
    };

    JSON.parse(window.localStorage.getItem('productDetails'));
    
    productDetails[letter].push(object);
    localStorage.setItem("productDetails", JSON.stringify(productDetails));
    displayData();
    message("");
 }

/**
 * this function display the data in table
 */
function displayData() {
    objectArray = Object.values(productDetails);
    display(objectArray);
}

/**
 * function to display table
 */
function display() {
    
    var result = JSON.parse(window.localStorage.getItem("productDetails"));
    console.log(result)
    messageTable(" ");
    let table = "<table border = 1 cellpadding = 10 ><th colspan=7 >Product Details</th><th colspan=7 >company Details</th><tr><th>weight</th><th>Product Id</th><th>Part No</th><th>Name</th><th>Size</th><th>Color</th><th>Description</th><th>Date</th><th>Address</th><th>Company name</th></tr>";
    for (var key in result) {
        for (var weight in result[key]) {
            //let companyDetails = result[key][weight].companyDetails ? result[key][weight].companyDetails : { date: "", address: "", companyName: "" };
            table += "<tr><td>" + key + "</td>";
            table += "<td>" + result[key][weight].id + "</td>";
            table += "<td>" + result[key][weight].partNo + "</td>";
            table += "<td>" + result[key][weight].productName + "</td>";
            table += "<td>" + result[key][weight].size + "</td>";
            table += "<td>" + result[key][weight].color + "</td>";
            table += "<td>" + result[key][weight].description + "</td>";
            table += "<td>" + result[key][weight].companyDetails.date + "</td>";
            table += "<td>" + result[key][weight].companyDetails.address + "</td>";
            table += "<td>" + result[key][weight].companyDetails.companyName + "</td>";

        }
    } messageTable(table);
    console.log(result)
}

【问题讨论】：

@pwilcox 你有什么想法吗？
在insertion函数内部，当你从localStorage读取时，你不会将返回值保存在任何变量中。您可能打算将结果存储在全局定义的 productDetails 变量中。
@lezabiey 看起来您需要先将 localStorage 信息分配给 productDetails，因为您总是从一个空对象开始，因此您将一个具有新信息的新对象插入到存储中，而不是更新上一个的顶部。尝试类似：let productDetails = JSON.parse(window.localStorage.getItem('productDetails'));
不相关，但您将一个参数传递给您的显示函数，但您实际上并没有使用。

标签： javascript local-storage

【解决方案1】：

您需要做的是添加一个检查，在页面加载时为您的数据查找 localstorage 密钥，如果检查为真，则将以前的 localstorage 数据添加到您的productDetails object。这是示例 =>

window.onload = init;
var arr = [];

function init() {
   if(localStorage.getItem("productDetails")) {
         arr.push(JSON.parse(localStorage.getItem("productDetails")));
         getValue(); /*Then Continue eg.Refer to a function*/
  }
   else {
     getValue();  /*Do something eg.Refer to a function*/ 
  }
}

概念是在页面加载时添加一个window.onload函数来检查localStorage键“productDetails”是否存在。如果键存在，则在此示例中将键存储的值添加/推送到数组arr。如果它不存在，那么例如。执行类似 => 引用函数的操作。

【讨论】：