javascript - 如何从本地存储中获取数组的值并显示它

Question

我试图从本地存储中显示一个数组，但是在我再次点击保存按钮时刷新页面后，本地存储中的先前条目被新条目替换并且无法正常工作。

.js 文件：

let count = 0;
let countStr = []

let saveEl = document.getElementById("save-el")
let countEl = document.getElementById("count-el")
let resetBtn = document.getElementById("reset-btn")
let saveBtn = document.getElementById("save-btn")
let incrementBtn = document.getElementById("increment-btn")
const entriesFromLocalStorage = JSON.parse(localStorage.getItem("entries"))


saveEl.innerHTML = entriesFromLocalStorage


incrementBtn.addEventListener("click" , function(){
    count = count + 1 ;
    countEl.innerHTML = count;
})


saveBtn.addEventListener("click" , function(){
    countStr.push(count)
    saveEl.innerHTML = countStr
    localStorage.setItem("entries", JSON.stringify(countStr))
     count = 0;
    countEl.innerHTML = 0;


})


resetBtn.addEventListener("click" , function(){
    saveEl.innerHTML = "";
    localStorage.clear()
})

HTML 文件：

<h1>People entered:</h1>
    <h2 id="count-el">0</h2>
    <button id="increment-btn">INCREMENT</button>
    <button id="save-btn">SAVE</button>
    <div class="entries">
        <p class="prev-ent">Previous entries:</p>
        <p id="save-el"></p>
    </div>
    <button id="reset-btn">Reset entries</button>
    <script src="index.js"></script>

标签： javascripthtmllocal-storage

Answer 1

let count = 0;
let countStr = []

let saveEl = document.getElementById("save-el")
let countEl = document.getElementById("count-el")
let resetBtn = document.getElementById("reset-btn")
let saveBtn = document.getElementById("save-btn")
let incrementBtn = document.getElementById("increment-btn")
const entriesFromLocalStorage = JSON.parse(localStorage.getItem("entries") || '[]')

// This is important
countStr = entriesFromLocalStorage;

saveEl.innerHTML = entriesFromLocalStorage


incrementBtn.addEventListener("click", function () {
    count = count + 1;
    countEl.innerHTML = count;
})


saveBtn.addEventListener("click", function () {
    countStr.push(count)
    saveEl.innerHTML = countStr
    localStorage.setItem("entries", JSON.stringify(countStr))
    count = 0;
    countEl.innerHTML = 0;


})


resetBtn.addEventListener("click", function () {
    saveEl.innerHTML = "";
    localStorage.clear()
})