Question

我遇到问题，无论何时单击提交按钮，它刷新页面，但是localStorage中的数据很好。

如果互联网可用，这不是问题，因为它会重新加载页面。

但是当我没有互联网连接时它很烦人，因为它显示＆＃34;没有互联网连接＆＃34;而不是显示页面。

如何在没有页面刷新的情况下更新div？或者让它刷新而不让我知道我没有互联网连接。

＆＃13;

<!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>

＆＃13;

Answer 1

将submitData()和clearStorage()更改为：

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

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

那应该解决你的问题。

Answer 2

问题在于您是否正在发送表单，这基本上就像点击链接一样（这里唯一的区别是您使用的是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;
    ...
}

Answer 3

这将更新没有页面刷新的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>

Answer 4

如果您使用 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>

提交表单后不显示localStorage页面

4 个答案: