原生JS中localStorage数据刷新后无法持久化的问题咨询

你遇到的问题核心很明确：页面每次刷新时，代码第一行的localStorage.setItem("language", "ar");会无条件执行，直接覆盖localStorage里已有的language值——哪怕你之前已经把它设为en，刷新后也会被重置回ar。

React项目里不会出现这种情况，是因为常规写法会先读取localStorage的已有值，只有当值不存在时才设置默认值，不会主动覆盖已持久化的数据。

修改代码如下，仅在localStorage没有language值时设置默认的ar：

// 先检查本地存储是否已有language值，无则设置默认值
if (!localStorage.getItem("language")) {
  localStorage.setItem("language", "ar");
}

const toEnglish = (e) => {
  if (e.target.closest(".english")) {
    localStorage.setItem("language", "en");
  }
};

document.addEventListener("click", (e) => toEnglish(e));

这样页面刷新时，只要之前已经将language设为en，localStorage就会保留这个值，不会被重置。

内容的提问来源于stack exchange，提问作者aasem shoshari