CODEWITHSUNDEEP
javascripthtmlformslocal-storage
Jaumesv
Jaumesv

Reputation: 1095

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>

Upvotes: 22

Views: 131076

Answers (5)

MaZzIMo24
MaZzIMo24

Reputation: 207

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

Upvotes: 0

Kishan Patel
Kishan Patel

Reputation: 21

Here,Simple solution using JQUERY is like this..

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

Upvotes: 2

Shahala Danish
Shahala Danish

Reputation: 1

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

Upvotes: 0

Drew Noakes
Drew Noakes

Reputation: 311345

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.

Upvotes: 11

CocLn
CocLn

Reputation: 742

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>

Upvotes: 52

Related Questions