У меня проблема, когда всякий раз, когда я нажимаю кнопку отправки, она обновляет страницу, хотя в 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>
0
4 Leave Cover 30 Авг 2017 в 11:05

3 ответа

Лучший ответ

Измените submitData() и clearStorage() на:

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

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

Это должно исправить вашу проблему.

1
Apoorv Joshi 30 Авг 2017 в 08:09

Проблема в том, что вы отправляете форму, которая в основном похожа на щелчок по ссылке (единственное отличие здесь заключается в том, что вы используете 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;
    ...
}
0
Chris G 30 Авг 2017 в 08:27

Если вы используете 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>
-2
Chamidu Jayaruwan 30 Авг 2017 в 08:16