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

Question

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>

score 52 · Accepted Answer · edited Dec 14 '14 at 13:58

52

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>

edited Dec 14 '14 at 13:58

Derek

882
1
14
36

answered Jun 13 '13 at 13:14

CocLn

742
10
15

and how I can put the onclick function on input submit? – Jaumesv Jun 13 '13 at 14:45
Can u try that; – CocLn Jun 14 '13 at 04:58

score 11 · Answer 2 · answered Sep 20 '17 at 13:48

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.

score 2 · Answer 3 · answered Dec 20 '18 at 13:10

2

Here,Simple solution using JQUERY is like this..

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

answered Dec 20 '18 at 13:10

Kishan Patel

21
1

score 0 · Answer 4 · answered Oct 10 '18 at 07:35

0

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

answered Oct 10 '18 at 07:35

Shahala Danish

1

MaZzIMo24 · Answer 5 · 2022-09-24T09:54:03.307

This is my function from my CMS, that save all TEXTAREA and INPUT values on "keyup" and place it in the right element on reload. After the form has been submitted, only the submitted form is deleted from the local storage.

Set it to buttom of your page, thats it.

(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,'','',''));

PS: Replace the 'keyup' event with the 'input' event, if you like. With the 'keyup' event, copy&paste are saved to. — MaZzIMo24, Sep 25 '22 at 21:13

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

5 Answers5

Linked