刷新页面并添加新值后，旧的本地存储值被删除答案

【问题标题】：after refreshing page and adding new values old localstorage values get erased刷新页面并添加新值后，旧的本地存储值被删除
【发布时间】：2022-02-10 18:49:02
【问题描述】：

我的本地存储工作正常，但我运行它的唯一问题是当我尝试在页面刷新后添加新值时，以前存储的值被删除。我想这可能是因为我使用的是相同的密钥。

I tried this localStorage.setItem("name_"+new Date().getTime(), JSON.stringify(favs))

但它没有帮助。

这是我添加一个值并将其存储到本地存储中的函数

值是数组中的字符串

const favs [];
 
   function addValue(e) {
        if (e.target.value !== "") {
          if (!favs.includes(e.target.value)) {
            favs.push(e.target.value);
            localStorage.setItem("name", JSON.stringify(favs));
            console.log(favs);
            document.getElementById("favsarray").innerHTML =  favs
          }
        }
      }

【问题讨论】：

您不断将favs 重新初始化为一个空数组。而不是const favs = JSON.parse(localStorage.getItem('name') || "[]");
你能把这个作为答案，以便我接受吗
不，这绝对是重复的。我不是来做代表的。

标签： javascript arrays reactjs event-handling local-storage

【解决方案1】：

每次重新加载页面时，您都在重新初始化收藏，而不是从 localStorage 加载它，因此当您保存第一个值时它会覆盖它。您需要做的是首先从 localStorage 获取值，然后推送新值。您可以在页面加载或首次尝试将值推送到 localStorage 时执行此操作，如下所示：

let favs = [];
 
   function addValue(e) {
        if (e.target.value !== "") {
          if (favs === []) {
            favs = JSON.parse(localStorage.getItem("name"));
          }

          if (!favs.includes(e.target.value)) {
            favs.push(e.target.value);
            localStorage.setItem("name", JSON.stringify(favs));
            console.log(favs);
            document.getElementById("favsarray").innerHTML =  favs
          }
        }
      }

【讨论】：