Question

如果这是重复的邮件，我深表歉意，但是我找不到任何可以帮助我的东西。我想利用localStorage，以便在单击第1页上的按钮时，第2页上的元素将获得一个新类，所有这些都来自单个Javascript文件。到目前为止，在第2页上时，控制台告诉我第1页上的按钮为空，因此代码无法正确执行。

我将使用localStorage在我的项目中广泛添加类，因此希望该解决方案没有太复杂，也不需要jQuery。

这是第1页的HTML代码：

<button type="button" id="button">Local storage</button>
<br>
<a href="page2.html">Next page</a>
<script src="main.js"></script>

第2页：

<p id="output">Give me a class!</p>
<script src="main.js"></script>

两个HTML文件（main.js）都有一些简化的Javascript：

let button = document.getElementById('button');
let output = document.getElementById('output');

button.addEventListener('click', function() {
  localStorage.setItem('someKey', 'someValue');
});

if (localStorage.getItem('someKey') === 'someValue') {
  output.classList.add('some-class');
};

正如我提到的那样，在第2页上时，第1页上的按钮的值为null，这就是为什么我认为.js文件底部的if语句未执行的原因。即使在本地而不是全局设置变量时，也会发生这种情况。甚至有可能在单个Javascript文件中完成所有操作，还是应该创建两个并将其导入另一个Java文件？

Answer 1

我将尝试在没有所有信息的情况下回答此问题。

本地存储基于每个域（而不是每个页面）工作，因此任何的HTML页面都将共享相同的LocalStorage数据库，只要它们位于同一域。

如果您当前正在通过通过文件系统打开网站来开发Web应用程序，即file://C:/Users/UserA/Documents/WWW/index.html，则浏览器无法检测到同一域中有2个不同的页面，因此将为每个实例创建一个新的LocalStorage数据库。

您可以通过本地或远程Web服务器托管您的Web应用程序来解决此问题，该本地或远程Web服务器是您通过http://localhost:8080/index.html或https://example.com/index.html

访问网站的

如何使用单个Javascript文件在两个或更多HTML页面之间共享本地存储，而不会出现“空”的情况？

1 个答案: