CODEWITHSUNDEEP
javascriptarrayslocal-storage
TheLearner
TheLearner

Reputation: 2863

Javascript push() replacing element instead of appending

Here's a function I have written to add words to local storage using Javascript. In case you're wondering, this is my attempt at building a search history functionality for a simple dictionary lookup site.

function add2local(entry){
    var l = localStorage.length;

if(l==0){
    var lu = [entry];
    localStorage.setItem("w", JSON.stringify(lu));
}
else {
    var lu = JSON.parse(localStorage.getItem("w")); alert(lu);
    lu.push(entry); alert(lu);
}}

My understanding is the this function would keep appending its argument to local storage every time it's called. So, the first time I call it, I send it the word pirate. This gets added to the array and subsequently to the local storage as expected. The first alert() (the alert() functions are solely being used for testing) confirms this. The second time, I call it with the word vampire. Now, going by the function's logic, vampire should be appended to the array and thus the second alert() should output "pirate, vampire." And so it does.

But the third time around, say, I call the function with the word foo. This time around, it should output "pirate, vampire, foo" but instead shows "pirate, foo". Every subsequent call simply replaces the second word with the new word instead of appending it. What might I be doing wrong here? Am I misunderstanding how push() works?

Upvotes: 0

Views: 1445

Answers (2)

AJcodez
AJcodez

Reputation: 34176

Why check the storage length? You don't care. Fetch the key and if it's null then default to empty array. 

function add2local (entry) {
  var key = "w"
  var value = localStorage.getItem(key)
  if (value) {
    value = JSON.parse(value)
  } else {
    value = []
  }
  value.push(entry)
  localStorage.setItem(key, JSON.stringify(value))
}

Upvotes: 2

user2864740
user2864740

Reputation: 61885

The if condition and logic is incorrect; it is irrelevant how many items localStorage has, but it is very important to re-save the modified array.

In any case, I suspect an impl. might look as so:

function add2local(entry){
    // load entries - if there are none, we simulate an empty array to load
    var lu = JSON.parse(localStorage.getItem("w") || "[]");
    // add new entry
    lu.push(entry);
    // write back - so change is not lost between function calls
    localStorage.setItem("w", JSON.stringify(lu));
    // return all local entries saved - for use from the caller
    return lu;
}

Upvotes: 2

Related Questions