0

I'm having issues with the logic of using Local session variables. So I understand that HTML5 allows you to set and get these local storage variables.

I've read through this post: adding objects to array in localStorage and understood that by using SetItem, you will rewrite the variable that you have set and thus for a dynamic array, you will need to get the variable first before pushing a new value.

So the problem I'm having, and I dont't even know if it's possible, is that I want to have, for example, a index.html page which accepts a user input and adds it into an array that needs to be persistent. When the user reloads the same page, the previous input will still be in the same array. From what I read from the post mentioned previously, you will rewrite the variable if you use SetItem. However, if I don't use setItem, how will I be able to specify that the array is to be a local Storage variable... I'm sorry if I confused anyone... because I am quite confused myself. Thanks in advance.

Improve this question
4
  • I can not follow you ;) Think of the localStorage as a shelf and of the array as a box with compartments. You can place the box on the shelf (save to storage) and you can take the box of the shelf (load from storage). If you leave the room and enter it later (reload) the box is still on the shelf (persistance). If you want to know what is in one of the compartments (array field) or if you want to fill one compartment you have to take the box from the shelf (load) and get/set the content of one compartment. after that you have to place the box on the shelf again (save). Where do you struggle? Commented Oct 28, 2017 at 0:24
  • Okay so adding on to what S. Walker has replied with, his answer gets the array that already exists and pushes in values as desired. However, before you check if an array exists, you will need to set the array as a local storage right? Having said so, I’m not sure if this is achievable but I want to have a index.html page which initialises an array that will be used to store the user inputs and upon reloading the page, those elements are still there. But if you use SetItem to initialise the array then how will it be that you will never overwrite the elements within the array? Commented Oct 28, 2017 at 1:00
  • However, before you check if an array exists, you will need to set the array as a local storage right? No. You can check if the array exists before you have to create it. If that wouldn't be possible it would be very stupid ;) Commented Oct 28, 2017 at 21:15
  • Ohhhh I think I understand >.< HAHAHA thanks! Commented Oct 29, 2017 at 1:09

2 Answers 2

Reset to default
0

All of your assumptions are correct. You can only write to localStorage using setItem, and when setItem is called, you overwrite whatever value exist there. Therefore, the only way to add an item to an array in localStorage is to get the array from localStorage, manipulate it and then put it back with the new items. 

// Check if we already have an array in local storage.
var x = localStorage.getItem("myArray");
// If not, create the array.
if (x === null) x = [];
// If so, decode the array. 
else x = JSON.parse(x);
// Add our new item. 
x.push("value 1");
// Encode the array.
x = JSON.stringify(x);
// Add back to LocalStorage. 
localStorage.setItem("myArray", x);
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

This could done by the following approach:

var myInput = document.getElementById("myInput").value; // user data
var myList = JSON.parse(localStorage.getItem("myList")); // retrieve the list from LS
if(!Array.isArray(myList)) { // if LS list is not ok, instantiate new array
  myList = [];
}
myList.push(myInput); // append user data to the list
localStorage.setItem("myList", JSON.stringify(myList)); // save the list back to LS
Improve this answer

Comments