данные формы не сохраняются в chrome локальное хранилище - PullRequest
Новая
       1

данные формы не сохраняются в chrome локальное хранилище

2 голосов
/ 29 мая 2020

Я довольно новый программист и коснулся только JavaScript, но я пытаюсь отправить форму и вернуть данные как часть моей школьной работы, но, согласно Google DevTool, он не сохраняется в локальном хранилище Google , есть помощь? 

    function submit() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var feedback = document.getElementById("feedback").value;

    localStorage.setItem("name", name);
    localStorage.setItem("email", email);
    localStorage.setItem("feedback", feedback);

    return true;
}

function init() {
    var name = localStorage.getItem("name");
    var email = localStorage.getItem("email");
    var feedback = localStorage.getItem("feedback");

        document.write("passed value = " + name);
        document.write("passed value = " + email);
        document.write("passed value = " + feedback);

}

HTML

<form action="form.html" method="get" onsubmit="submit()">
            <fieldset style="width: 80%; margin: auto;">
                <legend>Feedback:</legend>
                <label for="name">Name:</label><br />
                <input type="text" id="name" name="name"><br><br>
                <label for="email">Email:</label><br />
                <input type="email" id="email" name="email"><br><br>
                <label for="feedback">Feedback:</label><br />
                <textarea id="feedback" name="feedback"></textarea><br>
                <input type="submit" value="Submit" onclick="submit()">
            </fieldset>
        </form>
    </section>
    <script src="form.js" type="text/javascript"></script>

Ответы [ 3 ]

1 голос
/ 29 мая 2020

Вы создали там очень надоедливую и трудную для поиска ошибку!

Нет, это не удвоение события в <input type="submit" value="Submit" onclick="submit()"> <input type="submit" value="Submit" onclick="submit()">, хотя это можно считать плохой практикой

Обнаружить?

это submit ()!

Попробуйте это и отправьте форму 

<form action="form.html" method="get" onsubmit="alert(getAttributeNames()); submit()">
  <fieldset style="width: 80%; margin: auto;">
    <legend>Feedback:</legend>
    <label for="name">Name:</label><br />
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label><br />
    <input type="email" id="email" name="email"><br><br>
    <label for="feedback">Feedback:</label><br />
    <textarea id="feedback" name="feedback"></textarea><br>
    <input type="submit" value="Submit" onclick="submit()">
  </fieldset>
</form>
</section>

Удивлен, а? Вы нигде не определили getAttributeNames(), пока работает! Как это вы спрашиваете ??

Это потому, что это один из многих встроенных методов DOM, которые наследует каждый html элемент. Теперь вы понимаете, что произошло, когда вы использовали onsubmit="submit()" Он не вызывал написанную вами функцию submit (), вместо этого он вызывал встроенный метод submit (собственный формы), который отправляет его на сервер. и как только он будет отправлен, очевидно, что он не будет иметь никакого отношения к локальному хранилищу.

Исправить просто, просто используйте имена, которые не будут конфликтовать со встроенными. Или вы также можете использовать addEventListener () , потому что в этом случае вы можете явно указать браузеру «нет, используйте эту функцию, которую я написал, а не встроенную, пожалуйста»

Вот фиксированная версия Я только что изменил имя вашей функции 

<form action="form.html" method="get" onsubmit="submit2()">
  <fieldset style="width: 80%; margin: auto;">
    <legend>Feedback:</legend>
    <label for="name">Name:</label><br />
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label><br />
    <input type="email" id="email" name="email"><br><br>
    <label for="feedback">Feedback:</label><br />
    <textarea id="feedback" name="feedback"></textarea><br>
    <input type="submit" value="Submit" onclick="submit()">
  </fieldset>
</form>
</section>

<script>
  function submit2() {
    var name = document.getElementById("name").value;
    var email = document.getElementById("email").value;
    var feedback = document.getElementById("feedback").value;

    localStorage.setItem("name", name);
    localStorage.setItem("email", email);
    localStorage.setItem("feedback", feedback);

    return true;
  }

  function init() {
    var name = localStorage.getItem("name");
    var email = localStorage.getItem("email");
    var feedback = localStorage.getItem("feedback");

    document.write("passed value = " + name);
    document.write("passed value = " + email);
    document.write("passed value = " + feedback);

  }
</script>
0 голосов
/ 29 мая 2020

Я использую для этого функцию, поэтому могу вызвать ее в любое время. 

// add to local storage
const addToLocalStorageObject = function (name, key, value) {
    // Get the existing data
    let existing = localStorage.getItem(name);
    // If no existing data, create an object
    // Otherwise, convert the localStorage string to an object
    existing = existing ? JSON.parse(existing) : {};
    // Add new data to localStorage object
    existing[key] = value;
    // Save back to localStorage via stringify
    localStorage.setItem(name, JSON.stringify(existing));
};

// retrieve from local storage
const retrieveFromLocalStorageObject = function (name) {
    let data = localStorage.getItem(name);
    // read the localStorage item and convert it to an object
    return data ? JSON.parse(data) : null;
};

Затем вызовите addToLocalStorageObject('name', name);

и retrieveFromLocalStorageObject('name');

NB: я не писал вышеупомянутые функции, но считаю их чрезвычайно полезными.

0 голосов
/ 29 мая 2020

Дело в том, что localstorage не может хранить объекты, но вы всегда можете сохранить json отформатированные объекты в виде строки и проанализировать ее позже, когда вы захотите получить данные!

А также форма отправки должна быть остановился до обновления страницы! просто добавив return false в событие onsubmit. 

<form action="form.html" method="get" id="myForm">
  <fieldset style="width: 80%; margin: auto;">
    <legend>Feedback:</legend>
    <label for="name">Name:</label><br />
    <input type="text" id="name" name="name"><br><br>
    <label for="email">Email:</label><br />
    <input type="email" id="email" name="email"><br><br>
    <label for="feedback">Feedback:</label><br />
    <textarea id="feedback" name="feedback"></textarea><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

<script>

  var myForm = document.querySelector("form#myForm");

  myForm.onsubmit = function(){
    const data = {};
    const dataToFetch = this.querySelectorAll("input, textarea, button, select");

    for(let element of dataToFetch){
  
      if( element && element.tagName && element.name )
        data[element.name] = element.value;

    }
    
    let jsonData = JSON.stringify( data );
    
    localStorage.setItem("formData", jsonData);
    
    alert("Data stored to localStorage itemName:'formData'");
    
    return false;
  }

</script>
...