javascript - 我可以仅使用 JavaScript 和按钮元素更改整个网站(2 页)上的所有图片吗？

Question

我正在尝试了解 JavaScript 函数如何不仅影响访问者当前所在的页面，而且影响网站上的所有页面。我制作了一个简单的网站，有 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。这篇文章很好地解释了差异scotch.io/@PratyushB/local-storage-vs-session-storage-vs-cookie

对于您的示例，我建议使用 SesionStorage d eveloper.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

因此，您需要在设置“情绪图像”时保存它，例如sessionStorage.setItem('心情图像', 'images/smiley_blue.png');

然后，在页面加载时，您可以检查之前是否已设置，然后相应地使用该值:

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