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

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

<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>
9
forms html5 javascript local-storage

3 ответов

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

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

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

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

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

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);

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

0