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

У меня есть форма, которая регистрируется на веб-сайте, но не в моей, и я хочу, чтобы они сохраняли данные формы в моей сети с локальным хранилищем 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>

Ответ 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>

Ответ 2

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

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

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

Ответ 3

Вот быстрая функция, которая сохранит значение <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);

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

Кто-нибудь должен мне помочь?

<!DOCTYPE html>
<html>
<title>Auto-Suficiencia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/w3.css">
<link rel="stylesheet" 
href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; return false;" 
integrity="sha384- 
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">

<head>
<script>

function store(){   
var inputName = document.getElementById("cardName");
localStorage.setItem("cardName", inputName.value);

var inputValue = document.getElementById("Value");
localStorage.setItem("Value", inputValue.value);

var inputDescription = document.getElementById("Description");
localStorage.setItem("Description", inputDescription.value);

if (typeof(Storage) !== "undefined") {
    if (localStorage.storecardName) {
        localStorage.storecardName.setItem = text(inputName.value);
    } else {
    if (localStorage.storecardValue) {
        localStorage.storecardValue.setItem = Number(inputValue.value);
    } else }
    if (localStorage.storecardDescription) {
        localStorage.storecardDescription.setItem = 
text(inputDescription.value);
    }
        document.getElementById("result").innerHTML = 
localStorage.storecardName.getItem;
        document.getElementById("result").innerHTML = 
localStorage.storecardValue.getItem;
        document.getElementById("result").innerHTML = 
localStorage.storecardDescription.getItem;
    }
else {
    document.getElementById("result").innerHTML = "Ops! Alguma coisa deu 
errado...";
    }       
}

</script>
</head>
<body>

<div class="w3-container">
  <div class="w3-card-4" style="width:100%">
    <header class="w3-container w3-light-grey">
        <h2><Div id="nameBox"></Div></h2>
    </header>
    <div class="w3-container">
        <h2><div id="result"></div></h2>
    </div>
  </div>
</div>

<div class="w3-container">
<div class="row">
    <div class="col-md-8">
        <h3>Adicionar um Envelope e Saldo</h3>

        <form name="contact-form" method="post" id="contact-form">
            <div class="form-group">
                <label for="inputName">Envelope</label>
                <input type="text" class="form-control" id="cardName" 
placeholder="Envelope" required>
            </div>

            <div class="form-group">
                <label for="inputValue">Valor</label>
                <input type="number" class="form-control" id="Value" 
placeholder="Valor" required>
            </div>

            <div class="form-group">
                <label for="inputDescription">Descrição</label>
                <input type="textarea" class="form-control" 
id="Description" placeholder="Descrição" required>
            </div>

            <button onclick="store()" class="btn btn-primary" 
name="submit" value="Submit" id="submit_form">Adicionar</button>

        </form> 
        </div>
    </div>
</div>
</body>
</html>