i want to have an array (converted also to a localStorage value) box where the value of '#textInput' is added to the localStorage each time, however after refreshing and entering a new value, the new value is not added to the localStorage, but replaces it. I believe this is because after refreshing the data from users[] is set to null, but dont know how to fix it

var users = new Array();
var valueChanger = 1;

alert(localStorage.getItem('usernames'));

function addValue() {
  var newUser = $('#textInput').val();
  users.push(newUser);
  localStorage.setItem('usernames', users);
  alert(localStorage.getItem('usernames'));
}

i want to have an array (converted also to a localStorage value) box where the value of '#textInput' is added to the localStorage each time, however after refreshing and entering a new value, the new value is not added to the localStorage, but replaces it. I believe this is because after refreshing the data from users[] is set to null, but dont know how to fix it

var users = new Array();
var valueChanger = 1;

alert(localStorage.getItem('usernames'));

function addValue() {
  var newUser = $('#textInput').val();
  users.push(newUser);
  localStorage.setItem('usernames', users);
  alert(localStorage.getItem('usernames'));
}

• javascript
• jquery
• html
• local-storage

• 2 localStorage only saves strings, so you have to save and load in a special way non strings. json.stringify and json.parse is monly used – juvian Commented Feb 26, 2016 at 18:31
• What Juvian said and you also never retrieve the value to a variable. Users is initialized to a new array every page load. You need to stringify the value when setting it. Parse it and set it to a variable on getting. Then you can push a new value to it. – AtheistP3ace Commented Feb 26, 2016 at 19:21

3 Answers 3

You have to rewrite your code like the below to make it working,

var users = JSON.parse(localStorage.getItem('usernames')) || [];
var valueChanger = 1;

alert(localStorage.getItem('usernames'));

function addValue() {
  users.push($('#textInput').val());
  localStorage.setItem('usernames', JSON.stringify(users));
  alert(localStorage.getItem('usernames'));
}

Since localStorage only stores string, we need to stringify the array before storing and Parse it before reading.

Everytime, when page refreshes you're first statement creates new array instead of using old one.

var newUser = localStorage.getItem('usernames') || "";
var valueChanger = 1;
var users = [newUser];

alert(localStorage.getItem('usernames'));

function addValue() {
  var newUser = $('#textInput').val();
  users.push(newUser);
  localStorage.setItem('usernames', users);
  alert(localStorage.getItem('usernames'));
}

Thanks & Cheers :)

You are correct in that users is an empty array each time you refresh. Instead of using the new array "users" in your function. Grab the information (if any) out of localStorage.setItem('usernames', users); and set that to equal users. Then you can push additional users into usernames.