LocalStorage 未与构建文件一起显示答案

【问题标题】：LocalStorage not showing with build fileLocalStorage 未与构建文件一起显示
【发布时间】：2018-07-16 16:06:24
【问题描述】：

我已经实现了一个带有 react 的小型 localStorage，一旦用户输入它们，我会在其中保存 URI 端点，如果它们存在，我会在我的 componentDidMount 函数中调用它们。

设置看起来超级简单，当我在我的开发文件上执行 npm start 时它完全有效，但是在构建我的项目并使用“服务”在本地托管它时，我再也看不到我的 localStorage。这是否与构建文件或我为它们提供服务的方式有关？

componentDidMount() {
  userUri = localStorage.getItem('userUri');
  tracesUri = localStorage.getItem('tracesUri');
  if (userUri && tracesUri) {
    this.setState({
      userUri: userUri,
      tracesUri: tracesUri
    });
  }
};

closeModal = () => {
  this.setState({
    showSettings: false
  });
  localStorage.setItem('userUri', this.state.userUri);
  localStorage.setItem('tracesUri', this.state.tracesUri);
};

【问题讨论】：

标签： javascript reactjs local-storage

【解决方案1】：

如果我正确理解您的问题，当您在本地运行应用程序时，您无法看到通过npm 运行应用程序时保留的数据？

需要记住的是，通过localStorage 存储的数据仅限于当前的document.origin see MDN docs here。

您需要确保在同一 origin 本地测试/运行，以便在两种情况下都可以看到相同的持久数据。

您可以将此代码添加到您的应用中：

 console.log('Origin is:', document.origin);

这会将来源打印到控制台，然后通过“npm”运行应用程序并在本地托管以验证来源相同或不同，从而交叉检查该来源

【讨论】：

【解决方案2】：

对存储在浏览器中的数据（例如 localStorage 和 IndexedDB）的访问按来源分开。每个源都有自己独立的存储，一个源中的 JavaScript 无法读取或写入属于另一个源的存储。[参考：link]

所以我猜你在服务时，你必须使用不同的端口，因为你无法访问以前的 localStorage 值。

【讨论】：