Как сохранить данные из формы с помощью локального хранилища HTML5?

Question

У меня есть форма для входа на веб-сайт, но не на мой, и я хочу, чтобы они сохраняли данные формы в моей сети с локальным хранилищем HTML5. Но не как. Любая идея? Моя форма такая:

<form action="http://issuefy.ca.vu/on/login.php" class="form-login"  method="post" /> 
<input name="email" type="email" id="email" required="" placeholder="Email" />
<input name="password" type="password" required="" placeholder="Contraseña" />
</form>

Answer 1

LocalStorage имеет метод setItem. Вы можете использовать это так:

var inputEmail= document.getElementById("email");
localStorage.setItem("email", inputEmail.value);

Когда вы хотите получить значение, вы можете сделать следующее:

var storedValue = localStorage.getItem("email");

Также возможно сохранить значения по нажатию кнопки, например так:

<button onclick="store()" type="button">StoreEmail</button>

<script  type="text/javascript">
  function store(){
     var inputEmail= document.getElementById("email");
     localStorage.setItem("email", inputEmail.value);
    }
</script>

Answer 2

Вот быстрая функция, которая будет хранить значение <input>, <textarea> и т.д. в локальном хранилище, и восстановить его при загрузке страницы.

function persistInput(input)
{
  var key = "input-" + input.id;

  var storedValue = localStorage.getItem(key);

  if (storedValue)
      input.value = storedValue;

  input.addEventListener('input', function ()
  {
      localStorage.setItem(key, input.value);
  });
}

Ваш элемент ввода должен иметь id указал, что является уникальным среди всех применений этой функции. Именно это id который идентифицирует значение в локальном хранилище.

var inputElement = document.getElementById("name");

persistInput(inputElement);

Обратите внимание, что этот метод добавляет обработчик событий, который никогда не удаляется. В большинстве случаев это не будет проблемой, но вы должны подумать, будет ли это в вашем сценарии.

Answer 3

Здесь простое решение с использованием JQUERY выглядит следующим образом..

var username = $('#username').val();
var password = $('#password').val();
localStorage.setItem("username", username);
localStorage.setItem("password", password);

Answer 4

Вы можете сохранить данные формы в localstorage, применив проверку формы с помощью javascript. Просто прочтите эту простую статью https://xeeratech.com/form-validation-in-javascript-and-store-form-data-in-localstorage/

Answer 5

Вы можете использовать openDB для манипулирования локальным хранилищем, а для более подробной информации вы также можете прочитать статью о веб-хранилище.

в котором вы можете установить или получить данные таким образом -

db.local.set("key", "value"); // set
db.local.get("key"); // get

Answer 6

Для сохранения данных вы должны использовать метод localStorage.setItem, а для получения данных вы должны использовать метод localStorage.getItem.

Answer 7

Это моя функция из моей CMS, которая сохраняет все значения TEXTAREA и INPUT на «keyup» и помещает их в правильный элемент при перезагрузке. После отправки формы из локального хранилища удаляется только отправленная форма.

Установите его в нижней части вашей страницы, вот и все.

      (function (mz,cms,parentKey,subKey) {
  setTimeout(function() {
    const storeAll = "textarea,input";
    const formArray = mz.querySelectorAll(storeAll);
    parentKey = window.location.href+"-";
    formArray.forEach((formItem) => {
      if (formItem) {
        subKey = formItem.getAttribute("name");
        var key = parentKey+subKey;
        if (localStorage[key]) {
            var _localStorage = localStorage[key] ;
            formItem.value = _localStorage;
        }
        formItem.addEventListener("keyup", function () {
            var _localStorage = formItem.value;
            var T = formItem.getAttribute("type");
            if (T == "password" || T == "hidden" || T == "submit" || formItem.disabled) {
                //console.log("Ignore: "+formItem.getAttribute("name")); 
                return;
            }
            localStorage.setItem(key, _localStorage);
        } , false);
        formItem;
      }
    }); 
    const submitForm = mz.querySelectorAll("form");
    submitForm.forEach((submitItem) => {
      if (submitItem) {
        submitItem.addEventListener("submit", function (e) {
            // e.preventDefault();
            const formArray = submitItem.querySelectorAll("textarea,input");
            formArray.forEach((formItem) => {
                subKey = formItem.getAttribute("name");
                localStorage.removeItem(parentKey+subKey);
            } , false);
        } , false);
      }
    });
  }, 1);
}(this.document,'','',''));