是否可以仅使用JavaScript和按钮元素来更改整个网站（两页）上的所有图片？

Question

I am trying to learn how JavaScript functions can affect not just the page the visitor is currently on, but all the pages on the website. I have made a simple site with 2 pages, one with a blue face and one with a green one. When you click on the 2 buttons, the blue face will either become a smiling face, or an angry face.

My question is, how do I target the green face on the other page to do the same as the blue face? And is it possible to do with JavaScript alone? Also, if I have pressed the happy button and made the blue face smile, it becomes neutral again if I go back and forth between the two pages.

Any tips on how I can solve this? Suggestions to tutorials that teach the basics of what I am trying to do would also be great. I suspect this has got something to do with localStorage.

I have tried to play around with localStorage, but could not make it work in the project I am working on.

Here is the code for index.html (main page with the buttons and blue face):

<div class="container">
    <nav>
        <a href="other_page.html">Link to other page</a>
    </nav>

    <img id="indexPic" src="images/neutral_blue.png" alt="">
    <button id="toSmiley" type="button" name="button">Make images on all pages into smiley faces</button>
    <button id="toAngry">Make images on all pages into angry faces</button>
</div><!-- container -->

<script src="smiley.js" type="text/javascript"></script>

Here is the code for other_page.html:

<div class="container">
    <nav>
        <a href="index.html">Link to main page</a>
    </nav>

    <img id="otherPic" src="images/neutral_green.png" alt="">
</div><!-- container -->

<script src="smiley.js" type="text/javascript"></script>

And here is my JavaScript file:

let smileyBtn = document.getElementById('toSmiley');
let angryBtn = document.getElementById('toAngry');

function allSmiles(a) {
  document.getElementById('indexPic').src = a;
}

function longFace(b) {
  document.getElementById('indexPic').src = b;
}

smileyBtn.onclick = function () {
  allSmiles("images/smiley_blue.png");
}

angryBtn.onclick = function () {
  longFace("images/angry_blue.png");
}

I also have posted the project on my Github account here: https://github.com/jjberg83/change_all_pics

Answer 1

If you want to pass data between pages you will need to use LocalStorage, SessionStorage or a Cookie. This article explains the difference quite nicely scotch.io/@PratyushB/local-storage-vs-session-storage-vs-cookie

For your example I would recommend SesionStorage d eveloper.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

So you would need to save the 'mood image' whenever it gets set eg sessionStorage.setItem('mood-image', 'images/smiley_blue.png');

Then, on page load, you could check to see if it had been set previously then use the value accordingly:

var presetImage = sessionStorage.getItem('mood-image');
if( presetImage ){
 // do your stuff, setting the relevant src attributes to the preset-image
}