How to Save Data from a Form with HTML5 Local Storage

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

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>

Save Form using localstorage HTML5

You can do that easily, but if you want to store an array you will need to serialize or encode it first because localStorage doesn't deal with arrays. e.g.:

var yourObject = $('#your-form').serializeObject();

To save you do either:

localStorage['variablename'] = JSON.stringify(yourObject) or localStorage.setItem('testObject', JSON.stringify(yourObject));

and to retrieve: JSON.parse(localStorage['yourObject']); or JSON.parse(localStorage.getItem('yourObject')); and then the field values are available as yourObject.fieldName;

EDIT: In the example above I used serializeObject which is a jQuery plugin. The code used is below. (You can use serializeArray if you prefer but you will have to do more work to make your data usable once retrieved):

jQuery.fn.serializeObject = function () {
  var formData = {};
  var formArray = this.serializeArray();

  for(var i = 0, n = formArray.length; i < n; ++i)
    formData[formArray[i].name] = formArray[i].value;

  return formData;
};

Populate HTML form with data saved on Local Storage

The task is simple:

• get localStorage content (but first check is it there);
• for each stored ID check the HTML type from the DOM (because you don't know it from current localStorage object);
• assign value or checked attribute (if is radio/checkbox) to it;

So here it is:

function dataLoad() {
    if (localStorage.getItem('fieldString') !== null) {
        var inputParse = JSON.parse(localStorage.getItem('fieldString'));
        $.each(inputParse, function (key, value) {
            var field = document.getElementById(key);
            if(field.type == 'radio' || field.type == 'checkbox'){
                field.checked = value;
            }else{
                field.value = value;
            }
        });
    }
}

You can call the function automatically on document load or assign it to some button (like save action) - it's up to you.

Good luck!

Saving HTML form data to local storage

It looks like the selector for your email input is wrong, try changing it to:

var stuff = $('#email').val();

And give your input an id:

<input id="email" type="email" value="" placeholder="Join Update List Here" class ="newsletter-email" />

See this Fiddle: https://jsfiddle.net/m8w1uaso/

Edit:
If you want to persist all previously entered email addresses and add to this array each time the form is submitted you could do something like this:

$(document).on("click", ":submit", function(e) {
  var stuff = ($('#email').val());
    // Load emails
  var emails = JSON.parse(localStorage.getItem('EmailsStuff'));
  if (emails) {
    // If the item exists in local storage push the new email address to the array and and save
    emails.push(stuff);
    localStorage.setItem('EmailsStuff', JSON.stringify(emails));
  } else {
    // If the item doesn't exist in local storage set the item to a new array containing new email address
    localStorage.setItem('EmailsStuff', JSON.stringify([stuff]));
  }
});

$(document).on("click", "#loadEmail", function(e) {
  alert(JSON.parse(localStorage.getItem('EmailsStuff')));
});

See this Fiddle: https://jsfiddle.net/v9c6xnmh/

How to save a data on localstorage and append this data to the some body element

first you need to check your browser support or not localStorage

   if (typeof(Storage) !== "undefined") {
    //if your browser support localstorage then you can write code like this

    localstorage.setItem("your key", JSON.stringify(your value));

} else {
// sorry you can't use localstorage

}

after you set your value

you can access your value like this way

var your_variable = JSON.parse(localstorage.getItem("your key"));

Save the data in Local storage using jQuery

add this

localStorage.setItem('x', y);

x = name of whatver you want the local storage var to be
y = the value of what you want to save

for example:

const id = $(this).parent().parent().find(".txtID").val();

you would save it in local storage as

localStorage.setItem('txtId', id);

now to call it or to see the value later on you simply just put

localStorage.getItem('txtId');

---

Related Topics