jQuery: Using web storage/local storage on input fields

Question

I am trying so save/retrieve the values of all input fields in a form. Unfortunately, this is not working.
The frustrating part is that I have no idea whats wrong. I already tested for type: both key and value are strings. The event is attached properly, a console.log gets triggered.
Do you see anything that strikes you in this code? Why are no values saved or retrieved?

(function ($) {
    if (typeof (window.localStorage) != "undefined") {
        $.each($("#myform input[type=text]"), function () {
            localStorage.getItem($(this).attr("id"));
        });
        $("#myform input[type=text]").live("change", function () {
            localStorage.setItem($(this).attr("id"), $(this).val());
        });
    }
})(jQuery);

Of course I am testing in a browser that supports web storage and every input has an id.

which version of jQuery are you using ?

Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar

2013-11-06 16:32:50 +00:00
Commented Nov 6, 2013 at 16:32 — Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar, Commented Nov 6, 2013 at 16:32
Please put it in jsfiddle. and show html content also.

clu3Less
– clu3Less

2013-11-06 16:34:55 +00:00
Commented Nov 6, 2013 at 16:34 — clu3Less
– clu3Less, Commented Nov 6, 2013 at 16:34
@TusharGupta I am using jQuery version 1.8.3.

user2807681
– user2807681

2013-11-06 16:35:35 +00:00
Commented Nov 6, 2013 at 16:35 — user2807681
– user2807681, Commented Nov 6, 2013 at 16:35
looks fine to me jsfiddle.net/arunpjohny/E5qNH/2

Arun P Johny
– Arun P Johny

2013-11-06 16:36:41 +00:00
Commented Nov 6, 2013 at 16:36 — Arun P Johny
– Arun P Johny, Commented Nov 6, 2013 at 16:36

Manolo · Accepted Answer · 2013-11-06 16:37:25Z

1

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. Users of older versions of jQuery should use .delegate() in preference to .live().

(from JQuery documentation)

So my guess is that you have two options:

$("#myform input[type=text]").on("change", function () {
        localStorage.setItem($(this).attr("id"), $(this).val());
 });

or

$("#myform input[type=text]").delegate("change", function () {
        localStorage.setItem($(this).attr("id"), $(this).val());
 });

answered Nov 6, 2013 at 16:37

Manolo

26.9k21 gold badges91 silver badges134 bronze badges

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

Comments

sebapalus · Accepted Answer · 2013-11-06 16:39:35Z

0

.live() is removed in 1.9 and deprecated from 1.7
I don't see any value setter $(this).val(localStorage.getItem($(this).attr("id"))) in the first each loop to populate values.

answered Nov 6, 2013 at 16:39

sebapalus

5563 silver badges6 bronze badges

1 Comment

user2807681 Over a year ago

Thanks, that solved my problem – how stupid of me! I retrieved the value but simply did not enter it as value!

Collectives™ on Stack Overflow

jQuery: Using web storage/local storage on input fields

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related