Question

我实现了一个带有react的小型localStorage，在其中，一旦用户输入URI端点，我便将其保存起来，如果存在，我将在我的componentDidMount函数上对其进行调用。

设置似乎非常简单，并且在我对开发文件进行npm启动时完全可以使用，但是在构建项目并使用“ serve”将其托管在本地时，我再也看不到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);
};

Answer 1

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

因此，我想您在提供服务时必须使用其他端口，因为该端口您无法访问以前的localStorage值。

Answer 2

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

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

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

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

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

这会将原始信息打印到控制台，然后通过'npm'运行该应用程序并在本地托管以确认该原始信息是相同还是不同，从而进行交叉检查

LocalStorage不与构建文件一起显示

2 个答案: