javascript array in localstorage

Question

I have this piece of code that adds values to an array with an input box. I would like to save that array in localStorage and display the contents of the array on another page.

<button type="button" id="submit">Submit</button>
<button type="button" id="display">Display</button>

window.onload = function() {
    var inputArray = [];
    var input = document.getElementById('inputbox');
    var screen = document.getElementById('screen');

    document.getElementById('submit').onclick = function () {
        inputArray.push(input.value);
        screen.innerHTML = input.value;
    };

    document.getElementById('display').onclick = function () {
        screen.innerHTML = inputArray
    };
}

So what is exactly your problem now ? Could you please elaborate on that? — S Vinesh
– S Vinesh, Commented Nov 15, 2016 at 12:52
When I refresh the page the contents of the array get lost, I would like to save those contents in localstorage. So that the array doesn't get emptied on a page refresh. — ekbayrak2
– ekbayrak2, Commented Nov 15, 2016 at 12:54
Where did you implement logic of adding your array yo LocalStorage? — xAqweRx
– xAqweRx, Commented Nov 15, 2016 at 12:57

Satpal · Accepted Answer · 2016-11-15 13:04:29Z

2

You are not persisting data in localStorage. As localStorage persist only string data, You can stringify while storing and parse while reading.

 window.onload = function() {
     var inputArray = [];

     //Check if data is persisted in localStorge then load in the array
     var str = localStorage.getItem('nyArray')
     if (str) {
         inputArray = JSON.parse(str);
     }

     var input = document.getElementById('inputbox');
     var screen = document.getElementById('screen');

     document.getElementById('submit').onclick = function() {
         inputArray.push(input.value);
         screen.innerHTML = input.value;

         //Store stringifyed string
         localStorage.setItem('nyArray', JSON.stringify(inputArray))
     };

     document.getElementById('display').onclick = function() {
         screen.innerHTML = inputArray
     };
 }

edited Nov 15, 2016 at 13:04

answered Nov 15, 2016 at 12:58

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

3 Comments

sam Over a year ago

it should be setItem instead of getItem inside of submit click function.

Sean Cogan Over a year ago

In your snippet, you spelled localStorage as localStorge

Satpal Over a year ago

Thank guys for typo.

sam · Accepted Answer · 2016-11-15 12:58:30Z

1

You can stringify your array and then save it in localStorage. When required, read and parse it back to array.

var originalArr = ["V", "A"];
var strArr = JSON.stringify(originalArr);

// to save your array
localStorage.setItem("YOUR_KEY",strArr);

// to read from localstorage
var yourOriginalArray = localStorage.getItem("YOUR_KEY");

answered Nov 15, 2016 at 12:58

sam

9792 gold badges13 silver badges29 bronze badges

Comments

Devesh Pandey · Accepted Answer · 2016-11-15 12:55:21Z

-2

Use Global variable see below

window.savedarray= inputArray

now you can access savedarray in other pages

answered Nov 15, 2016 at 12:55

Devesh Pandey

483 bronze badges

2 Comments

Sean Cogan Over a year ago

Downvoted because this is not storing the array in localstorage, but simply storing it as a global variable.

Rory McCrossan Over a year ago

Also storing a global variable (which is bad enough in itself) does not make that variable available in any other page of the site.

Collectives™ on Stack Overflow

javascript array in localstorage

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related