localStorage的頁面不顯示我在哪裏，每當我點擊提交按鈕提交問題形式

-1

之後，刷新頁面，數據在localStorage的罰款，但。localStorage的頁面不顯示我在哪裏，每當我點擊提交按鈕提交問題形式

這不是一個問題，如果網絡是可用的，因爲這將刷新頁面。

但很煩人，當我有沒有互聯網連接，則顯示「無網絡連接」，而不是顯示的頁面。

我怎樣才能使它更新不需要刷新頁面的DIV？或讓它刷新而不讓我知道我沒有互聯網連接。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Local Storage</title> 
 

 
</head> 
 

 
<body> 
 
    <div id="mydiv">Local Storage is </div> 
 
    <div id="myCount">Item in Local Storage is </div> 
 
    <br/> 
 
    <div id="myResult">Result: </div> 
 
    <br/> 
 
    <form id="localStorageTest" method="post" action="" autocomplete="off"> 
 
    <label>Name:</label> 
 
    <input type="text" name="name" id="name" class="stored" value=""> 
 
    <br/> 
 
    <label>Message:</label> 
 
    <textarea name="message" id="message" class="stored"></textarea> 
 
    <br/> 
 
    <input type="submit" class="demo-button" value="Submit" onclick="submitData();"> 
 
    </form> 
 
    <br/> 
 
    <input type="submit" class="btn-clear" value="Clear Local Storage" onclick="clearStorage();"> 
 

 
    <script> 
 
    function lsTest() { 
 
     var i = 'test'; 
 
     try { 
 
     localStorage.setItem(i, i); 
 
     localStorage.removeItem(i); 
 
     return true; 
 
     } catch (e) { 
 
     return false; 
 
     } 
 
    } 
 

 
    if (lsTest() === true) { 
 
     var retrievedObject = localStorage.getItem('testObject'); 
 

 
     document.getElementById('mydiv').innerHTML += 'available.'; 
 
     document.getElementById('myCount').innerHTML += localStorage.length; 
 
     document.getElementById('myResult').innerHTML += retrievedObject; 
 

 
     console.log('retrievedObject: ', JSON.parse(retrievedObject)); 
 
    } else { 
 
     document.getElementById('mydiv').innerHTML += 'unavailable.'; 
 
    } 
 

 
    function submitData() { 
 
     var v_name = document.getElementById('name').value; 
 
     var v_message = document.getElementById('message').value; 
 

 
     var testObject = { 
 
     'name': v_name, 
 
     'message': v_message 
 
     }; 
 

 
     localStorage.setItem('testObject', JSON.stringify(testObject)); 
 
     //localStorage.setItem('message', v_message); 
 

 
     alert('Data: ' + localStorage.getItem('testObject')); 
 
    } 
 

 
    function clearStorage() { 
 
     localStorage.clear(); 
 
     location.reload(); 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

來源

2017-08-30 4 Leave Cover

'函數submitData（E）{e.preventDefault（）; var v_name ...'（我不得不閱讀你的問題兩次，才能真正理解問題所在）。 –

如果網頁是遠程服務器，並且沒有互聯網 – brk

變化submitData()和clearStorage()到：

function submitData(event){ 
    event.preventDefault(); 
    ... 
} 

function clearStorage(event){ 
    event.preventDefault(); 
    ... 
}

這應該解決您的問題。

來源

2017-08-30 08:09:36

-2

如果您使用的onclick 一套輸入類型的按鈕

<input type="button" class="btn-clear" value="Clear Local Storage" onclick="submitData();">

或者使用的onsubmit

<form onsubmit="return submitData()"> 
</form> 

<script> 
function submitData() { 
    // Your work 

    // Make sure it returns false to prevent form from reloading the page 
    return false; 
} 
</script>

來源

2017-08-30 08:14:59

雖然我完全同意，這是一個評論，而不是OP的問題的答案。 –

使用按鈕可以隨時清除數據。在提交時，您可以讓您按Enter鍵提交表單而無需額外編碼。 –

同意，但如果你能看到我的個人資料，我剛開始並沒有足夠的評論點。 –

問題是你要發送一個形式，這基本上是就像點擊一個鏈接一樣（這裏唯一的區別是你使用的是HTTP POST請求，而不是GET請求，就像點擊鏈接一樣）。
您的形式是：

<form id="localStorageTest" method="post" action="" autocomplete="off">

的action屬性規定所請求的資源，因爲它是空白，頁面將基本上重裝。

爲了防止這種情況，您需要攔截表單提交。要做到這一點最簡單的方法是完全移除<form>元素;無論如何你不需要它。

隨着<form>的到位，您可以通過在點擊/提交事件上調用.preventDefault()來攔截點擊按鈕或表單的提交。

function submitData(e) { 
    e.preventDefault(); // don't handle click the usual way after this function 
    var v_name = document.getElementById('name').value; 
    ... 
}

來源

2017-08-30 08:27:01

這將更新DIV無刷新頁面

將代碼複製到一個文件並運行。運行的代碼片段可能不支持本地存儲

變化

固定數據人口區域

populateData（）

新增數據人口代碼
停止重新加載頁面並在清除本地存儲時調用populateData（）
將輸入類型更改爲按鈕爲「清除本地存儲」

使用https://www.diffchecker.com/diff找到更多的變化

<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Local Storage</title> 
 
    </head> 
 
    <body> 
 
     <div> 
 
     Local Storage is <span id="myspan"></span> 
 
     </div> 
 
     <div> 
 
     Item in Local Storage is <span id="myCount"></span> 
 
     </div> 
 
     <br/> 
 
     <div> 
 
     Result: <span id="myResult"></span> 
 
     </div> 
 
     <br/> 
 

 
     <form id="localStorageTest" method="post" action="" autocomplete="off" onsubmit="return submitData();"> 
 
     <label>Name:</label> 
 
     <input type="text" name="name" id="name" class="stored" value=""> 
 
     <br/> 
 
     <label>Message:</label> 
 
     <textarea name="message" id="message" class="stored"></textarea> 
 
     <br/> 
 
     <input type="submit" class="demo-button" value="Submit"> 
 
     </form> 
 
     <br/> 
 
     <input type="button" class="btn-clear" value="Clear Local Storage" onclick="clearStorage();"> 
 

 
     <script> 
 
     function lsTest(){ 
 
      var i = 'test'; 
 
      try { 
 
      localStorage.setItem(i, i); 
 
      localStorage.removeItem(i); 
 
      return true; 
 
      } catch(e) { 
 
      return false; 
 
      } 
 
     } 
 

 
     function populateData() { 
 
      if(lsTest() === true){ 
 
      var retrievedObject = localStorage.getItem('testObject'); 
 

 
      document.getElementById('myspan').innerHTML = 'available.'; 
 
      document.getElementById('myCount').innerHTML = localStorage.length; 
 
      document.getElementById('myResult').innerHTML = retrievedObject; 
 

 
      console.log('retrievedObject: ', JSON.parse(retrievedObject)); 
 
      }else{ 
 
      document.getElementById('myspan').innerHTML = 'unavailable.'; 
 
      } 
 
     } 
 

 
     populateData(); 
 

 
     function submitData(){ 
 
      var v_name = document.getElementById('name').value; 
 
      var v_message = document.getElementById('message').value; 
 

 
      var testObject = { 'name': v_name, 'message': v_message }; 
 

 
      localStorage.setItem('testObject', JSON.stringify(testObject)); 
 
      //localStorage.setItem('message', v_message); 
 

 
      alert('Data: '+localStorage.getItem('testObject')); 
 
      populateData(); 
 

 
      return false; 
 
     } 
 

 
     function clearStorage(){ 
 
      localStorage.clear(); 
 
      populateData(); 
 
     } 
 
     </script> 
 
    </body> 
 
</html>

來源

2017-08-30 08:48:13

localStorage的頁面不顯示我在哪裏，每當我點擊提交按鈕提交問題形式

回答

相關問題