localStorage值始終爲空使用Javascript

-1

我使用一個函數將值提交到localStorage，另一個函數檢索它們並將它們放到網頁上它們各自的輸入字段中。localStorage值始終爲空使用Javascript

我的問題是雙重的。 retrieve()函數似乎沒有做任何事情;輸入字段中不包含Null。其次，我想要onSubmit()函數實際存儲輸入值。

這些是兩個功能。正如你所看到的，我聲明瞭elements和s_elements，並且我試圖檢索它們。但沒有任何反應！

function retrieve() { 
    if (typeof(Storage) != "undefined") { 
     var elements = document.getElementsByTagName('input'); 
     var s_elements = document.getElementsByTagName('select'); 
     for (var i=0; i<elements.length; i++) { 
      if (elements[i].getAttribute("type") != "submit" && elements[i].getAttribute("type") != "button") { 
       e = elements[i]; 
       e.setAttribute("value", localStorage[e.getAttribute("name")]); 
      } 
     } 
     for (var i=0; i<s_elements.length; i++) { 
      s_e = s_elements[i]; 
      s_e.setAttribute("value", localStorage[s_e.getAttribute("name")]); 
     } 
    } 
} 

function onSubmit() { 
    var elements = document.forms["forsendur"].getElementsByTagName("input"); 
    var s_elements = document.forms["forsendur"].getElementsByTagName("select"); 
    for (var i=0; i<elements.length; i++) { 
     if (elements[i].getAttribute("type") != "submit") { 
        e = elements[i]; 
        localStorage[e.getAttribute("name")] = e.getAttribute("value"); 
     } 
    } 
    for (var i=0; i<s_elements.length; i++) { 
       s_e = elements[i]; 
       localStorage[s_e.getAttribute("name")] = s_e.getAttribute("value"); 
    } 
}

這是與輸入值的形式：）

<input type="button" class="button2" value="Last session" onClick="retrieve();">

編輯_檢索（功能現在工作：

<form name="forsendur"> 
    < ... bunch of input and select fields > 
    <input class="button2" type="submit" value="Calculate" onClick="onSubmit();"/> 

</form>

這是唯一的按鈕調用retrieve() 。我修復了很多錯別字。現在只剩下一個問題了。

來源

2014-07-14 KSHMR

我們可以看到輸入的html嗎？或[jsfiddle]（http://jsfiddle.net） –

Javascript沒有塊範圍。你正在重複使用內循環中的'i'變量。此外，添加一些變量，因此您不必輸入像元素[i] .getAttribute（「name」）這樣的長訪問屬性，可以提高可讀性。 – Sacho

複製粘貼時的縮進錯誤，抱歉。我將編輯可讀性的代碼。 – KSHMR

你的問題的關鍵是，你要使用HTML屬性代替DOM屬性，讓您的輸入值。

的HTML屬性是這樣的：

<a href="http://example.com"></a>

一個DOM屬性可以這樣訪問：

document.querySelector('a').href = 'http://example.com'

HTML屬性通過讀您的瀏覽器，因爲它解析喲的HTML文本你的網站。瀏覽器創建一個DOM對象代表你的HTML元素，然後設置類似這種方式的屬性：

var a = document.createElement('a'); 
a.setAttribute('href', 'http://example.com')

經常有相當於DOM屬性到HTML屬性 - 像.href我上面描述的屬性。

這兩件事情之間的區別（除了你訪問它們的方式），是經過你的HTML頁面的大多數事件被載入修改DOM屬性，不HTML屬性 - 例如打字的input將改變相應DOM對象的.value屬性，但它不會修改HTML屬性：

<input type="text" value="hello"/> - 該HTML屬性value仍將"hello"，除非你明確地設置。同時，當您輸入輸入時，DOM屬性.value將反映輸入中的文本。

舉一個具體的例子在你的代碼，你會想行 localStorage[e.getAttribute("name")] = e.getAttribute("value"); <改變 - 使用HTML屬性value

到

localStorage[e.getAttribute("name")] = e.value; < - 使用DOM property.value

來源

2014-07-14 10:41:25 Sacho

localStorage值始終爲空使用Javascript

回答

相關問題