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

Question

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

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
          }
        }
      }

Answer 1

每次重新加载页面时，您都会 re-initializing 收藏而不是从 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
          }
        }
      }

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

after refreshing page and adding new values old localstorage values get erased

javascript

arrays

reactjs

event-handling

local-storage