Javascript - Изменить статус «флажок» ввода для идентичных входов на всех HTML страницах

Question

Я новичок в javascript, поэтому go просто! Я создал идентичный тумблер на всех своих страницах для веб-сайта. После долгих бесполезных поисков мне стало интересно, может ли кто-нибудь рассказать мне, как изменить состояние других тумблеров на всех других страницах, когда используется какой-либо конкретный переключатель. Мне удалось заставить переключатель делать то, что я хочу, то есть изменить таблицу стилей css, но хочу сделать еще один шаг вперед. Спасибо заранее. Вот мой код:

HTML:

<div class="lighting">
    <input id="lighting" type="checkbox" onclick="toggle()">
    <p>DAY/NIGHT MODE</p>
</div>

JS:

document.getElementById('lighting').addEventListener('click', function toggle() {
let ambience = document.getElementById('style1');
if (ambience.href.match('../CSS/style.css')) {
  ambience.href = '../CSS/dark-style.css';
} else {
  ambience.href = '../CSS/style.css';
}});

Answer 1

Я бы использовал localStorage таким образом:

var ambience = document.getElementById('style1');
var toggleButton = document.getElementById('lighting');
var styleInfo = {
  'day': '../CSS/style.css',
  'night': '../CSS/dark-style.css'
};
var toggleStatus = localStorage.getItem('toggleStatus') || 'day';
function setAmbience() {
  ambience.href = styleInfo[toggleStatus];
  localStorage.setItem('toggleStatus', toggleStatus);
  toggleButton.checked = toggleStatus=='night';
};
setAmbience();
toggleButton.addEventListener('click', function(e) {
  toggleStatus = toggleStatus == 'day' ? 'night' : 'day';
  setAmbience();
});

<link id="style1" rel="stylesheet" type="text/css" href="../CSS/style.css" />
<div class="lighting">
    <input id="lighting" type="checkbox" />
    <p>DAY/NIGHT MODE</p>
</div>

Надеюсь, это достаточно ясно. Также на JSFiddle

Answer 2

вам нужно сохранить ваш шаг в local storage, и это пример:

setInLocal(){
   localStorage.setItem('varTest', 'var')
}

и теперь вы можете getItem вот так:

if(localStorage.getItem('varTest') == 'var'){
   //your code here
}