localStorage 覆盖了我之前的表数据答案

【问题标题】：localStorage overwrites my previous table datalocalStorage 覆盖了我之前的表数据
【发布时间】：2021-08-11 05:09:59
【问题描述】：

我正在使用 onClick 函数返回数组数据以存储在 localStorage 上以显示表中的行。但是，每当触发 onClick 按钮时，它都会覆盖以前的数据表。任何帮助将不胜感激！

JavaScript：

function storeData(arr){
    
    localStorage.setItem("empObj",JSON.stringify(arr));
}

function displayData(){

    let empJson = JSON.parse(localStorage.getItem("empObj"));

    var tableContent =""
    var startTable = "<table border=1 width=200 align=center><tr><th>Item</th><th>Price</th></tr>"
    tableContent = "<tr><td>"+empJson[0]+"</td><td>"+empJson[1]+"</td></tr>"
    var endTable = "</table>"
    tableContent = startTable+tableContent+endTable
    document.getElementById("main").innerHTML=tableContent;    
}

HTML：

    <button type="button" class="btn btn-block btn-outline-primary"
    onClick="return storeData(['itemNumber1','$1,000'])">Add</button>

    <button type="button" class="btn btn-block btn-outline-primary"
    onClick="return storeData(['itemNumber2','$900'])">Add</button>

为了显示表格，我使用了 onload 函数

window.onload = function() {
                   displayData();
                }

https://i.stack.imgur.com/W9KcE.jpg

【问题讨论】：

嗨，杰森，欢迎来到 StackOverflow！您能否提供更多关于您在 localStorage 键 empObj 中存储的数据（和数据结构）的信息？
您的代码只是将一个元素添加到localStorage 并一次又一次地显示相同的项目

标签： javascript html json

【解决方案1】：

正确的实现应该是这样的：

function storeData(arr){
    // add 1 row instead of overwriting the whole array.
    // to do so, it must read the previous data from storage first
    const prevArr = JSON.parse(localStorage.getItem("empObj")) || [];
    // concatenate with previous data
    localStorage.setItem("empObj",JSON.stringify([...prevArr, arr]));
}

function displayData(empObj){
    let empJson = JSON.parse(localStorage.getItem("empObj"));

    var tableContent =""
    var startTable = "<table border=1 width=200 align=center><tr><th>Item</th><th>Price</th></tr>"
    tableContent = "<tr><td>"+empJson[0]+"</td><td>"+empJson[1]+"</td></tr>"
    var endTable = "</table>"
    tableContent = startTable+tableContent+endTable
    document.getElementById("main").innerHTML=tableContent;    
}

// html
<!-- return is unncessary in this case -->
<button type="button" class="btn btn-block btn-outline-primary"
  onClick="() => storeData(['itemNumber1','$1,000'])">Add</button>
<script>
window.onload = function() {
  displayData();
}
</script>

【讨论】：

我收到一个错误“Uncaught TypeError: Cannot read property '0' of null at displayData (savedcart.js:14)” 它指的是行“tableContent =” "+empJson[0]"
我忘了在那部分添加空合并：let empJson = JSON.parse(localStorage.getItem("empObj")) || [];

【解决方案2】：

localStorage.setItem 将始终根据特定键设置 localStorage 数据。这意味着它会覆盖以前的数据。如果您还想保留以前的数据，则必须从localStorage 获取数据，并将新数据附加到现有数据中，并使用新数据更新 localStorage。这是您案例中的一个工作示例。

function storeData(arr) {
    const previousData = localStorage.getItem("empObj");
    const jsonData = JSON.parse(previousData) || [];
    jsonData.push(arr);
    localStorage.setItem("empObj", JSON.stringify(jsonData));
}

function displayData(empObj) {
    let empJson = JSON.parse(localStorage.getItem("empObj")) || [];
    var tableContent = ""
    var startTable = "<table border=1 width=200 align=center><tr><th>Item</th><th>Price</th></tr>"
    empJson.forEach((node) => {
        tableContent += "<tr><td>" + node[0] + "</td><td>" + node[1] + "</td></tr>"
    })
    var endTable = "</table>"
    tableContent = startTable + tableContent + endTable
    document.getElementById("main").innerHTML = tableContent;
}

window.onload = function () {
    displayData();
}

<div id="main"></div>
<button type="button" class="btn btn-block btn-outline-primary"
    onClick="return storeData(['itemNumber1','$1,000'])">Add</butto

【讨论】：