javascript - 将所选语言保存在本地存储中？

Question

我有以下代码，一切看起来都正确，但我无法将语言保留在本地存储中。

state = {
  lang: JSON.parse(localStorage.getItem("lang")) || en
};

selectLanguage = e => {
  const langKey = e.target.value;
  this.setState(
    { lang: languages[langKey] },
    localStorage.setItem("lang", JSON.stringify(this.state.lang))
  );
};

console.log 消息是

localStorage
  Storage {lang: "[object Object]", length: 1}
    lang: "[object Object]"
      length: 1
  __proto__: Storage

我尝试在没有 JSON.parse 的情况下加载保存的语言，但又出现同样的问题。

先谢谢大家了

Answer 1

您确定对 ReactJS 组件的 state 属性进行字符串化是个好主意吗？您还应该知道 setState 的第二个参数需要一个函数(如此处定义的 https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react/src/ReactBaseClasses.js#L58 )，但您提交的是 undefined 这是 的结果>localStorage.setItem(...).

一旦状态对象真正更新，setState的可选回调就会被执行，这意味着this.state.lang的值可能是当前语言而不是新选择的语言。不管怎样，这是我的建议。

首先，仔细检查语言值是否符合您的预期，然后执行以下操作:

this.setState({
    lang: languages[langKey]
}, function() {
    /**
     * Safe to access state
     */
    localStorage.setItem('lang', JSON.stringify(this.state.lang));
});

不用担心，因为回调函数会保留当前组件的上下文，这意味着通过 this 访问状态是安全的。

您还需要处理 JSON.parse 由于其中包含无效信息而失败的情况，如果不处理它，整个应用程序将无法正确呈现。

我不确定你的需求，但我也相信等待状态改变是不必要的，你可以简单地这样做:

const langObject = languages[langKey]
this.setState({
    lang: langObject
});
/**
 * Not necessary to wait until state is updated
 */
localStorage.setItem('lang', JSON.stringify(langObject));

请注意，localStorage 的最大容量有限制，您可能不想尽可能多地使用它，以避免超出该限制。