将所选语言保存在本地存储中？答案

【问题标题】：Save selected language in localstorage?将所选语言保存在本地存储中？
【发布时间】：2018-12-14 03:57:08
【问题描述】：

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

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 的情况下加载保存的语言，但同样的问题。

提前谢谢大家

【问题讨论】：

languages 的值是多少，是一个大的 JSON 文件还是什么？
似乎在这里工作正常：jsfiddle.net/yak613/zq3rafxp
这是一个很大的 JSON 文件，我正在使用上下文 API 在整个应用程序中进行更改
调试，尝试在setState之后添加一个匿名fn作为回调，以确保状态是您在将lang设置为本地存储时所认为的状态。 this.setState( { lang: languages[langKey] }, () => { console.log('STATE', this.state) localStorage.setItem("lang", JSON.stringify(this.state.lang))} );
对我来说，我收到一个错误，我无法访问 json 文件，当我尝试从 json 访问任何值时它显示未定义

标签： javascript reactjs object local-storage

【解决方案1】：

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

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

首先，仔细检查languages 的值是否符合您的预期并执行以下操作：

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 的最大容量是有限制的，您可能不想尽可能多地使用它以避免超出该限制。

【讨论】：