Guide to saving HTML form data into localstorage as a JSON string through JavaScript

Question

Guide to saving HTML form data into localstorage as a JSON string through JavaScript

What's the best way to retrieve form values for localStorage as a JSON string without using JQuery? I tried using a for loop but I'm having trouble.. any hints would be greatly appreciated (I'm still new at this). Thank you!

 <input type="submit" name="submit" value="submitOrder" onclick="return getValues();">

var userOrder='';
function getValues(){
    for(var i=0; i < document.forms[0].length - 1; i++){
        console.log(document.forms[0][i]);
        return false;
    }
}    

localStorage.setItem('userOrder',JSON.stringify(userOrder));
console.log(localStorage.getItem('userOrder'));

javascript json local-storage

Answer 1

Answer №1

One way to achieve this functionality is by following these steps:

HTML:

<form id="myform">
  <input type="text" name="test">
  <input type="submit" value="submitOrder">
</form>

JavaScript:

const userOrder = {};

function getValues(e) {
  // Convert form elements object into an array
  const elements = Array.prototype.slice.call(e.target.elements);

  // Iterate through the array to store input name & value pairs
  elements.forEach((el) => {
    if (el.type !== "submit") {
      userOrder[el.name] = el.value;
    }
  });

  // Save the data to localStorage
  localStorage.setItem('userOrder', JSON.stringify(userOrder));
}  

document.getElementById("myform").addEventListener("submit", getValues);

Answer 2

One way to achieve this functionality is by following these steps:

HTML:

<form id="myform">
  <input type="text" name="test">
  <input type="submit" value="submitOrder">
</form>

JavaScript:

const userOrder = {};

function getValues(e) {
  // Convert form elements object into an array
  const elements = Array.prototype.slice.call(e.target.elements);

  // Iterate through the array to store input name & value pairs
  elements.forEach((el) => {
    if (el.type !== "submit") {
      userOrder[el.name] = el.value;
    }
  });

  // Save the data to localStorage
  localStorage.setItem('userOrder', JSON.stringify(userOrder));
}  

document.getElementById("myform").addEventListener("submit", getValues);

Answer 3

Answer №2

Avoid using jQuery with this method. By utilizing ES 2015 syntax, you can still support older browsers by running it through babel for compatibility.

// To loop through all forms within the document as an array,
// use the [...stuff] to convert the nodelist into a real array
let userdata = [...document.forms].map(form => {
  // Iterate through the form's relevant elements 
  // and create key/value pairs for the name/object
  return [...form.elements].reduce((obj, el) => {
    // Ensure every form control has a name attribute
    obj[el.name] = el.value;
    return obj;
  }, {});
});

// Convert the data object into a JSON string and store it
localStorage.setItem('userOrder', JSON.stringify(userdata));

// Retrieve and parse the stored data back into an object
let data = JSON.parse(localStorage.getItem('userOrder'));

If the forms have ids (recommended), you can also utilize reduce in the outer layer instead of map and hash on the form id:

let userdata = [...document.forms].reduce((result, frm) => {
  result[frm.id] = [...frm.elements].reduce((obj, el) => {

Continue with similar methods for further functionalities.

Answer 4

Avoid using jQuery with this method. By utilizing ES 2015 syntax, you can still support older browsers by running it through babel for compatibility.

// To loop through all forms within the document as an array,
// use the [...stuff] to convert the nodelist into a real array
let userdata = [...document.forms].map(form => {
  // Iterate through the form's relevant elements 
  // and create key/value pairs for the name/object
  return [...form.elements].reduce((obj, el) => {
    // Ensure every form control has a name attribute
    obj[el.name] = el.value;
    return obj;
  }, {});
});

// Convert the data object into a JSON string and store it
localStorage.setItem('userOrder', JSON.stringify(userdata));

// Retrieve and parse the stored data back into an object
let data = JSON.parse(localStorage.getItem('userOrder'));

If the forms have ids (recommended), you can also utilize reduce in the outer layer instead of map and hash on the form id:

let userdata = [...document.forms].reduce((result, frm) => {
  result[frm.id] = [...frm.elements].reduce((obj, el) => {

Continue with similar methods for further functionalities.

Guide to saving HTML form data into localstorage as a JSON string through JavaScript

Answer №1

Answer №2

Similar questions

Trouble with controlling the speed of ajax requests while using vue-multiselect and lodash

Check my Twitter feed every 10 seconds

What steps should I take to ensure that this JSON.stringify function functions as intended?

JavaScript Hangman Game Malfunctioning

Unlocking the Power of JSON: Techniques for Manipulating JSON Data in MongoDB

Discover the ultimate strategy to achieve optimal performance with the wheel

Transferring binary fragments to Node.js for assembly into a complete file. Creating a file

Vue.js watcher fails to observe changes in v-model

Dynamically filling a second dropdown menu according to the selection made in the first dropdown using AJAX and PHP

Can someone guide me on incorporating bluebird promises with request-extensible?

AngularJS not displaying loader during AJAX request

If the width of the table is set to 100% in the CSS, the legend in the Flot chart will automatically shift to the

The JSON data is incomplete and the APIs are not being generated. Is there anyone available to investigate this

Adjust Camera Position in A-Frame Scene Based on Scrolling Movement

Having trouble establishing a default route with React Router v5

Extract nested JSON data and load it into a pandas DataFrame

Node.js exec command encountering an uninformative error message and not executing properly

"Multiple instances of JavaScript files seem to be present when using Ajax navigation

Efficiently Loading JavaScript Files in Django for Optimal Website Performance

What's the best way to unpack the gzip data that Ajax sends to JavaScript?