0

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. 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.

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.

This is the HTML code for page 1:

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

And page 2:

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

And some simplified Javascript for both HTML files (main.js):

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. 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?

Cuckoos
  • 33
  • 1
  • 7
  • Are both these pages on the same domain – Dean Meehan Jan 16 '19 at 12:22
  • The button is on the both pages or just inside the first one? – Adrian Pop Jan 16 '19 at 12:25
  • If there's no other relation between page 1 and page 2 ( like page 1 opened page 2 ), you need some mechanism for page 1 to notify page 2 that the button was clicked and local was updated. I don't understand the reason behind it though. Is the end user forced to have both pages open to have both work correctly? – Shilly Jan 16 '19 at 12:26
  • @DeanMeehan Yes – Cuckoos Jan 16 '19 at 12:29
  • @Adrian Pop Just inside the first one – Cuckoos Jan 16 '19 at 12:34
  • @Shilly What kind of mechanism do you have in mind? And no, the way I have it envisioned is that the user navigates from the first to the second page, but based on the action from the first page, the second page does something. – Cuckoos Jan 16 '19 at 12:35
  • Well, even if you test them on localhost or on the same domain, you still have some errors. If you put a `console.log` before the `if`-statement, you'll see that there are errors on the 2nd page, since there isn't any button to add the event listener and how you said, the code won't be executed. I recommend you to use two separate js files or to do some sanity checking before. – Adrian Pop Jan 16 '19 at 12:37
  • Ok, then you can just have page 1 open page 2 with a url hash or query; or have page 1 use postMessage() to notify page two. As long as page 1 opens page 2, they can have a reference to eachother and hence, using localStorage isn't even needed. But your solution should work then once you host the pages on a web server as Dean described. – Shilly Jan 16 '19 at 12:50

1 Answers1

3

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.

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.

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

Dean Meehan
  • 2,511
  • 22
  • 36
  • Thank you for your suggestion. I set up a localhost server, first with npm and then with nginx, and my code still didn't work, but then I created multiple javascript files instead of just one (so one for every .html page) and everything worked fine. – Cuckoos Jan 24 '19 at 10:04
  • Try 127.0.01 instead of localhost after setting up the webserver. – Dean Meehan Jan 25 '19 at 08:46
  • 1
    It's also possible to [share local storage between different domains](https://stackoverflow.com/questions/33957477/cross-domain-localstorage-with-javascript) on the client-side using `window.postMessage`. – Anderson Green Aug 25 '21 at 20:52
  • @AndersonGreen I think you might want to make that as an answer with the actual code. Your comment was what I needed in my situation, not spinning up a server. – Wylie May 18 '22 at 08:58