js/html5 Displaying local storage

Question

Is there a simple way to display my local storage with document.write or document.innerHTML methods? It's being stored on 1 page, trying to display on separate. I'm new to js and just unsure how to build the syntax of those methods with how I'm storing it(if possible).

 $('form').submit(function() {
    var person = $("#FirstName").val() + "." + $('#LastName').val();
 $('input, select, textarea').each(function() {
    var value = $(this).val(),
       name = $(this).attr('name');
       localStorage[person + "." + name] = value;
       window.location.href = "Confirmation.html";
    console.log('stored key: '+name+' stored value: '+value);
});   
});

heres the whole if it helps: http://jsfiddle.net/EUWFN/

paka · Accepted Answer · 2013-10-29 19:42:54Z

14

As local storage is Object, you can go trough all it keys and get in values in simple way

for (var key in localStorage) {
  console.log(key + ':' + localStorage[key]);
}

To print it to the screen you can use something like this:

var output = ''; 

for (var key in localStorage) {
  output = output+(key + ':' +localStorage[key])+'\n';
}

$('#DivToPrintOut').html(output);

edited Oct 29, 2013 at 19:42

answered Oct 29, 2013 at 19:29

paka

1,64122 silver badges35 bronze badges

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

5 Comments

user1 Over a year ago

does this print the localstorage to the page or just in the console?

user2895892 Over a year ago

@user2912336, you can print localStorage[key] any way you want. For example $('.someclass').html(localStorage['key_name']) or document.write(localStorage['blahblah']).

user1 Over a year ago

what if these keys etc are defined on a separate page?

paka Over a year ago

does not matter on what page they was setted. Localstorage is one for all pages within one domain.

paka Over a year ago

do you get eny erorrs is console?

dirkdirk · Accepted Answer · 2015-07-08 02:37:21Z

1

If you're using Chrome, press F12 for the Developers Tools.

In the Console type localStorage and press enter.

Or in your js code put console.log(localStorage);.

In the console, click on the little triangle next to line that begins with Storage.

Or in Dev Tools:

click on the Resources tab at the top
click on the little triangle next to Local Storage in the frame on the left

answered Jul 8, 2015 at 2:37

dirkdirk

3013 silver badges10 bronze badges

Collectives™ on Stack Overflow

js/html5 Displaying local storage

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related