how can i store all input fields value within one wrapper using localstorage at once?

Question

suppose I have the following:

<div id="main">
    <div id="wrapper">
        <input/>
        <input/>
        <input/>
    </div>
</div>

I want to use localstorage to store the whole wrapper. I am doing this:

function save(){
    var nodeWrapper = $("#wrapper").html();
    localStorage.setItem("wrapper", nodeWrapper);
}


function restore(){
    var nodeWrapper = localStorage.getItem("wrapper");
    $("#wrapper").html(nodeWrapper);
}

Q1: I found the value in the input does not get stored. I only get that three inputs. I know I can store these input one by one, but how can I store them all at once? For example: I have more fields under wrapper, is there any way to store them easily other than one by one?

Q2: I also found it's not working if I store the node itself instead of it's innerHTML. Can localstorage sotre a node?

have you tried innerHTML instead of jquery's html() ?

Purefan
– Purefan

2014-05-11 12:28:58 +00:00
Commented May 11, 2014 at 12:28 — Purefan
– Purefan, Commented May 11, 2014 at 12:28

K K · Accepted Answer · 2014-05-11 12:24:41Z

1

Try this http://jsfiddle.net/lotusgodkk/GCu2D/103/: Instead of using .html(), use append() or prepend()

$(document).ready(function () {   
   localStorage.setItem("wrapper", $('#main').html());
   var nodeWrapper = localStorage.getItem("wrapper");
   $('#main').append(nodeWrapper);
});

If you need only the input values and their name, you can use serializeArray():

$('#wrapper input').serializeArray();

It will return an array which will contain the name and value of inputs.

HTML:

<div id="main">
  <div id="wrapper">
    <input value="1" name="a" />
    <input value="2" name="b" />
    <input value="3" name="c" />
  </div>
</div>

edited May 11, 2014 at 12:24

answered May 11, 2014 at 11:55

K K

18.2k4 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ItsJack Over a year ago

it does not store the value you changed on the page. you can try to bind the above script on one button, change 1 to 4 on the page and click that button.

K K Over a year ago

If you are changing the values, then i suggest you to use serializeArray() on inputs. It will store the name value pair in the array which you can store in the localstorage

mfirdaus · Accepted Answer · 2014-05-11 12:28:47Z

1

The most straight forward way is probably to store the values of the array as a JSON encoded string. This means iterating through the inputs to store and restore the values and encoding and decoding the JSON string. As you're using jQuery, the answer will also use jQuery http://jsfiddle.net/FC2pc/1/

function save() {
    var values = [];
    $("#wrapper input").each(function (i, e) {
        values.push(e.value);
    });
    localStorage.setItem('input_cache', JSON.stringify(values));
}

function restore() {
    var values = $.parseJSON(localStorage.getItem('input_cache'));
    $("#wrapper input").each(function (i, e) {
        e.value = values[i];
    });
}

answered May 11, 2014 at 12:28

mfirdaus

4,5921 gold badge27 silver badges26 bronze badges

1 Comment

Oneezy Over a year ago

Thanks for this! I've been trying to figure out how to do this for awhile

Collectives™ on Stack Overflow

how can i store all input fields value within one wrapper using localstorage at once?

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related