0

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

.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>
4

2 回答 2

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()
})
于 2021-08-25T09:21:44.577 回答
1

您可以跟踪对象中的当前值和以前的值，并在单击保存时将该对象存储在本地存储中，并在页面加载时检索相同的对象。

链接到CodeSandBox

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")) || {
  current: 0,
  previous: []
};

console.log(entriesFromLocalStorage);

saveEl.innerHTML = entriesFromLocalStorage.previous.toString() || 0;

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

saveBtn.addEventListener("click", function() {
  console.log(entriesFromLocalStorage, "At Save");

  countStr.push(count);
  saveEl.innerHTML = countStr;
  entriesFromLocalStorage.current = count;
  entriesFromLocalStorage.previous.push(count);
  localStorage.setItem("entries", JSON.stringify(entriesFromLocalStorage));
  count = 0;
  countEl.innerHTML = 0;
});

resetBtn.addEventListener("click", function() {
  saveEl.innerHTML = "";
  localStorage.clear();
});
<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>

链接到CodeSandBox

于 2021-08-25T09:29:15.563 回答