Могу ли я изменить все картинки на моем сайте (2 страницы), используя только JavaScript и элемент кнопки?

Question

Я пытаюсь узнать, как функции JavaScript могут влиять не только на страницу, на которой сейчас находится посетитель, но и на все страницы сайта.Я сделал простой сайт с 2 страницами, одна с синим лицом и одна с зеленым.Когда вы нажмете на 2 кнопки, синее лицо станет либо улыбающимся, либо сердитым лицом.

Мой вопрос: как мне настроить зеленое лицо на другой странице, чтобы сделать то же самое, что и голубое лицо?И возможно ли это сделать только с помощью JavaScript?Кроме того, если я нажал кнопку «счастливый» и заставил синее лицо улыбнуться, оно снова станет нейтральным, если я перейду туда-сюда между двумя страницами.

Какие-нибудь советы, как мне это решить?Предложения к учебным пособиям, которые учат основам того, что я пытаюсь сделать, также были бы хорошими.Я подозреваю, что это как-то связано с localStorage.

Я пытался поиграть с localStorage, но не смог заставить его работать в проекте, над которым я работаю.

Вот коддля index.html (главная страница с кнопками и синим лицом):

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

Вот код для 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>

А вот мой файл JavaScript:

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");
}

Я также разместил проект на своем аккаунте Github здесь: https://github.com/jjberg83/change_all_pics

Answer 1

Если вы хотите передавать данные между страницами, вам нужно использовать LocalStorage, SessionStorage или Cookie.Эта статья довольно хорошо объясняет эту разницуeveloper.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Таким образом, вам нужно будет сохранять «изображение настроения» всякий раз, когда оно устанавливается, например, sessionStorage.setItem('mood-image', 'images/smiley_blue.png');

Затем, при загрузке страницы, вы можете проверить, было ли оно установлено ранее, затем использовать соответствующее значение:

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