我希望通过在脚本中添加 Cookie 代码进行浏览器刷新时不更改当前设置？

Question

I placed the following script code into the night mode button with the help of onclick = "swap ()" . My goal: When the page is in dark mode, the other logo is active. When it's daytime mode, get another logo. But the problem is that when I do F5 on the page while in dark mode, the logo reverts to its original state even though the page remains in dark mode. Is it possible to edit the script code to help it stay in the cache in the browser?

 var shown = 'header_logo_ayar_1'; function swap() { if (shown === 'header_logo_ayar_1') { document.getElementById('header_logo_2').style.display = ""; document.getElementById('header_logo_1').style.display = "none"; shown = 'header_logo_ayar_2'; } else { document.getElementById('header_logo_1').style.display = ""; document.getElementById('header_logo_2').style.display = "none"; shown = 'header_logo_ayar_1'; } };

 <a id="header_logo_1" href="#" title=""> <figure><img src="img/logo_1.webp" alt="" width="" height=""></figure> </a> <a id="header_logo_2" href="#" title="" style="display:none;"> <figure><img src="img/logo_2.webp" alt="" width="" height=""></figure> </a>

I got this working example from here: https://jsfiddle.net/v2k3rzge/

I edited my own work.

If there are friends who can help on the subject, I ask them to answer. Thanks in advance...

Answer 1

Okay, you can use localStorage to get and set items.

var shown;
if (localStorage.getItem("shown") === null) {
  shown = "header_logo_ayar_1";
} else {
  shown = localStorage.getItem("shown");
}
// Or you could do this (with more advanced syntax)
var shown = (localStorage.getItem("shown") ?? "header_logo_ayar_1");


function swap() {
  // ...

  localStorage.setItem("shown", shown);
}

localStorage doesn't work in Stack Snippets, so try this JSitor link .