[英]How to share local storage between two or more HTML pages using a single Javascript file and not getting “null”?
I apologise if this is a duplicate, but I couldn't find anything that would help me. 如果这是重复的邮件,我深表歉意,但是我找不到任何可以帮助我的东西。 I want to make use of localStorage so that when you click a button on page 1, an element on page 2 gets a new class, all from within a single Javascript file. 我想利用localStorage,以便在单击第1页上的按钮时,第2页上的元素将获得一个新类,所有这些都来自单个Javascript文件。 So far, when on page 2, the console tells me that the button from page 1 is null, so the code doesn't get executed properly. 到目前为止,在第2页上时,控制台告诉我第1页上的按钮为空,因此代码无法正确执行。
I will be using localStorage to add classes extensively in my project, so hopefully the solution is nothing too complicated, and nothing that requires jQuery. 我将使用localStorage在项目中广泛添加类,因此希望该解决方案没有太复杂,也不需要jQuery。
This is the HTML code for page 1: 这是第1页的HTML代码:
<button type="button" id="button">Local storage</button>
<br>
<a href="page2.html">Next page</a>
<script src="main.js"></script>
And page 2: 第2页:
<p id="output">Give me a class!</p>
<script src="main.js"></script>
And some simplified Javascript for both HTML files (main.js): 以及两个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');
};
As I mentioned, the value of the button from page 1 is null when on page 2, which is why I think the if-statement at the bottom of the .js file doesn't get executed. 正如我所提到的,在第2页上时,第1页上的按钮的值为null,这就是为什么我认为.js文件底部的if语句不会执行的原因。 This happens even when the variables are set locally instead of globally. 即使在本地而不是全局设置变量时,也会发生这种情况。 Is it even possible to do everything from within a single Javascript file, or should I create two and import one into the other? 甚至有可能在单个Javascript文件中完成所有操作,还是应该创建两个并将其导入另一个Java文件?
I'll attempt to answer this question without all the information. 我将尝试在没有所有信息的情况下回答此问题。
Local storage works on a per domain basis (not per page) so any HTML pages will share the same LocalStorage
database as long as they are on the same domain. 本地存储基于每个域(而不是每个页面)工作,因此任何HTML页面只要在同一域中就可以共享相同的LocalStorage
数据库。
If you are currently developing your web application by opening websites through the filesystem ie: file://C:/Users/UserA/Documents/WWW/index.html
the browser cannot detect that 2 different pages are on the same domain so it will create a new LocalStorage
database for each instance. :如果您正在通过文件系统即打开网站开发Web应用程序file://C:/Users/UserA/Documents/WWW/index.html
浏览器中无法检测到2个不同的页面都在同一个域中,因此会为每个实例创建一个新的LocalStorage
数据库。
You can get around this by hosting your web application through a Local or Remote webserver that your accessing the website via http://localhost:8080/index.html
or https://example.com/index.html
您可以通过通过http://localhost:8080/index.html
或https://example.com/index.html
访问网站的本地或远程Web服务器托管 Web应用程序来解决此问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.