我可以只使用JavaScript和按钮元素更改整个网站（2页）上的所有图片吗？

我试图了解JavaScript函数如何不仅影响访问者当前所在的页面，而且影响网站上的所有页面。我做了一个简单的网站，有两个页面，一个是蓝色的，一个是绿色的。当您单击这两个按钮时，蓝色的脸将变成笑脸或愤怒的脸

我的问题是，如何将另一页上的绿色面作为目标，使其与蓝色面相同？单独使用JavaScript有可能吗？此外，如果我按下了“快乐”按钮，使蓝色的脸微笑，如果我在两页之间来回移动，它将再次变为中性

关于如何解决这个问题有什么建议吗？给那些教我要做的基本知识的教程提供建议也很好。我怀疑这与本地存储有关

我曾尝试使用localStorage，但在我正在进行的项目中无法使其正常工作

以下是index.html（带有按钮和蓝色字体的主页）的代码：

我还在我的Github帐户上发布了该项目：

---

如果要在页面之间传递数据，则需要使用本地存储、会话存储或Cookie。本文很好地解释了这种差异

作为您的例子，我建议您使用SesionStorage d

因此，您需要在设置“mood image”时保存它，例如，

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
}

该站点是否需要处于活动状态才能正常工作？我还不能让它工作，所以我在控制台中做了一些测试，以更好地理解会话存储。这种测试似乎只在现场进行。因此，我想知道，如果我把上面的代码放在服务器上，它是否也能工作，因为我还不能在两页之间来回切换时保持笑脸。@jjberg它不需要放在服务器上，这两个文件位于同一文件夹中，在它们之间共享会话存储时不应该有任何问题，即使您只是直接从文件资源管理器在浏览器中打开index.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>

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

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