How to save data from a form with HTML5 Local Storage?

问题

I have a form that makes logging into a website but not in mine and I want them to be saved form data in my web with HTML5 local storage. But not how. Any idea? My form is this:

<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 has a setItem method. You can use it like this:

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

When you want to get the value, you can do the following:

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

It is also possible to store the values on button click, like so:

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

Here's a quick function that will store the value of an <input>, <textarea> etc in local storage, and restore it on page load.

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

Your input element must have an id specified that is unique amongst all usages of this function. It is this id that identifies the value in local storage.

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

persistInput(inputElement);

Note that this method adds an event handler that is never removed. In most cases that won't be a problem, but you should consider whether it would be in your scenario.

回答3:

Here,Simple solution using JQUERY is like this..

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

回答4:

To save the data you have to use localStorage.setItem method and to get the data you have to use localStorage.getItem method.

来源：https://stackoverflow.com/questions/17087636/how-to-save-data-from-a-form-with-html5-local-storage

标签

javascript

html5

forms

local-storage