我想防止localstorage在重新加载和在表单中添加新条目时清除我的对象

Question

如何防止本地存储在重新加载并从输入字段插入新条目后被删除?我想在HTML中显示保存在列表中的数据。

// when I add new items in my form and submit it, the old entries in local-storage gets deleted
let datas = [];
const addEntry = e => {
e.preventDefault();
let data = {
id: document.querySelector("#date").value,
situation: document.querySelector("#situation").value,
mood: document.querySelector("#mood").value,
special: document.querySelector("#special").value,
expectations: document.querySelector("#expectations").value,
fulfilled: document.querySelector("#fulfilled").value,
};
datas.push(data);
console.log(datas);
document.querySelector("form").reset();
localStorage.setItem("smokeEntries", JSON.stringify(datas));
};
let content;
//get object and save in array variable

const getEntriesFromLocalStorage = () => {
content = [JSON.parse(this.localStorage.getItem("smokeEntries"))];
};
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#submit").addEventListener("click", addEntry);
});

Answer 1

我个人不会尝试保持两个数组(datas和content)同步，因为它会导致不一致的问题，就像这样，你使用一个更新和存储状态管理中的信息，而另一个显示在视觉上是不同步的。我建议这样组合它们:

let content = [];
const addEntry = e => {
e.preventDefault();
let data = {
id: document.querySelector("#date").value,
situation: document.querySelector("#situation").value,
mood: document.querySelector("#mood").value,
special: document.querySelector("#special").value,
expectations: document.querySelector("#expectations").value,
fulfilled: document.querySelector("#fulfilled").value,
};
content.push(data);
document.querySelector("form").reset();
localStorage.setItem("smokeEntries", JSON.stringify(content));
};
const getEntriesFromLocalStorage = () => {
content = [JSON.parse(localStorage.getItem("smokeEntries"))];
};
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#submit").addEventListener("click", addEntry);
});

设置内容也可能有一些问题(因为我们把它包装在括号里([])，但它可能已经是一个数组——在你运行它之后应该很明显，如果它变成嵌套数组，就删除括号)，但我没有运行代码。还要注意，要使content加载"状态";在使用状态之前，你需要调用getEntriesFromLocalStorage()(或者之后可能触发重新渲染)。