從另一個頁面上的localStorage改變div的顏色不起作用

好吧，所以我有兩頁，一頁包含一個可點擊div的表格，其中有很多，當按下1時它會導致頁面2包含表單其中用戶輸入存儲在本地存儲器中的信息，現在我試圖實現的是更改第1頁上的DIV的顏色，如果表單已成功提交，我的意思是永久性更改。
這是我第1頁使用的代碼：從另一個頁面上的localStorage改變div的顏色不起作用

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

    } 
}

與此代碼我保存的顏色到本地存儲。現在用於測試目的我添加了一個ID，只是一個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()" />

什麼也沒有發生？現在我想看看它是否通過嘗試更改第2頁（EnterInformation.html）上div的顏色來獲取存儲的顏色，它可以工作，但它會更改div的顏色一秒鐘，然後將其恢復爲默認值，爲什麼這是怎麼回事？有什麼建議？
我想發佈的原始問題是可以從另一個頁面更改點擊的div的顏色，但這比我想象的要複雜得多！

P.S.兩個頁面在不同的選項卡上同時打開。

來源

2017-02-16 MicroDev

你叫'changeColor'？ – epascarello

是的，我在按鈕的onclick事件中調用它！ – MicroDev

我編輯了這個問題。 – MicroDev

您可能遇到此問題，因爲當您點擊input與type="submit"時，它會嘗試「提交」它附加的表單。一般來說，這涉及頁面刷新（這不是你想要的）。您可以聽取表單提交併以編程方式取消其傳播，或者（因爲我們實際上不想提交任何內容）將html更改爲使用button和type="button"。就個人而言，我認爲這是最好使用正確的工具作業，讓我們一起去選擇2

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

你的下一個問題將是，儘管連接到您的button作品JavaScript代碼中，其他頁面不是「收聽」共享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元素使用類似的方法。爲了將您的顯示代碼與您的邏輯代碼分離，我建議您這樣做。這將使未來的維護更容易。我會讓你想出你自己的比喻，爲什麼保持類似的東西在一起，使他們更容易找到並更新:)

來源

2017-02-16 02:18:36 haxxxton

謝謝！：D只有一個小小的東西，這一切都有效，但它不會永久改變div的顏色！它是當我把'var myLoadedColor = localStorage.getItem（'myDataStorage'）; document.getElementById（'L1'）。style.backgroundColor = myLoadedColor;'到'window.onload'。這是正確的事情嗎？ – MicroDev

從另一個頁面上的localStorage改變div的顏色不起作用

回答

相關問題