Изменить цвет div из localStorage на другой странице не работает

Question

Итак, у меня есть две страницы, 1 страница содержит таблицу с интерактивными div, много их и при нажатии 1 приводит к странице 2, которая содержит форму в котором пользователь вводит информацию, хранящуюся в локальном хранилище, теперь я пытаюсь изменить цвет этого DIV на странице 1, чтобы форма была успешно отправлена, и я имею в виду ее постоянное изменение.
Это код, который я использовал на странице 1:

window.onload = function() { 
     myCustomColor = 'red'; 
     localStorage.setItem('myDataStorage', myCustomColor); 
    var d = document.getElementsByClassName("circleBase type1"); 
    for(var i = 0; i < d.length; i++) { 
     d[i].onclick = function() { 
      window.open("EnterInformation.html");    
     } 

    } 
} 

с этим кодом я хранить цвет в локальном хранилище. Теперь для целей тестирования я добавил идентификатор только один DIV id='L1', так что я пытался получать деталь .getItem так:

function changeColor() { 
     var myLoadedColor = localStorage.getItem('myDataStorage'); 
     document.getElementById('L1').style.backgroundColor = myLoadedColor; 

<input type="submit" name="appointment" value="" class="btn-warning" onclick="SaveInfo(); closeSelf(); changeColor()" /> 

Ничего не происходит ?! Теперь я хотел посмотреть, даже если он получает сохраненный цвет, пытаясь изменить цвет div на странице 2 (EnterInformation.html), и он работает, но он меняет цвет div на секунду, а затем возвращает его по умолчанию, почему это происходит? Любой совет?
Мой первоначальный вопрос, который я хотел опубликовать: Можно ли изменить цвет щелкнутого div с другой страницы, но это намного сложнее, чем я себе представлял!

P.S. обе страницы открыты одновременно на разных вкладках.

Answer 1

Возможно, вы столкнулись с проблемой, потому что, когда вы нажимаете на input с type="submit", он пытается «отправить» форму, к которой он прикреплен. Как правило, это связано с обновлением страницы (это не то, что вы хотите). Вы можете либо прослушать отправку формы, либо отменить ее распространение программно, либо (если мы действительно не хотим ничего представить), измените html, чтобы использовать button с type="button". Лично я считаю, что лучше использовать правильные инструменты для работы, так что давайте идти с опцией 2.

<button type="button class="btn-warning" onclick="SaveInfo(); closeSelf(); changeColor()">Click me to changeColor</button> 

Ваш следующий вопрос будет, что, даже если ваш Javascript код прилагается к вашим button работ, другая страница не «прослушивает» изменение общего доступа localStorage. Для этого мы можем использовать код от this answer, который описывает процесс привязки к событию storage и выполнение действия в результате. В вашем случае это будет выглядеть так:

window.addEventListener('storage', function(event){ 
    if (event.storageArea === localStorage) { 
     var myLoadedColor = localStorage.getItem('myDataStorage'); 
     document.getElementById('L1').style.backgroundColor = myLoadedColor; 
    } 
}, false); 

Я хотел бы предложить дал это введение в addEventListener в код, что вы смотрите на «модернизацию» ваш новый button элемент использовать аналогичный подход. Я предлагаю это ради разделения вашего кода дисплея из вашего логического кода. Это облегчит обслуживание в будущем. Я позволю вам придумать собственную аналогию относительно того, почему сохранение похожих вещей помогает им легче найти и обновить :)