Javascript array .push is not creating array items

Question

Clicking on the list from down should save the item to an array in local storage.

$(document).ready(function() {
$( 'ul.namelist>li' ).on( "click", function() {
   var items  = [];    
   items.push( $( this ).text() );
   localStorage.setItem("items",items);     
   });
})

HTML

<ul class="namelist">
 <li>John</li>
 <li>Leena</li>
 <li>Paul</li>
 <li>Vaughn</li>
 <li>Aneel</li>
 <li>Jason</li>
</ul>

This code stores only last clicked name in the array where as I am trying to store all clicks in it as [John,Paul,Leena] etc. Please help.

localStorage can only store strings. Try localStorage.setItem('items', JSON.stringify(items)). Of course, each time you click an <li>, you will only ever store an array of length 1 — Phil
– Phil, Commented May 11, 2020 at 5:20

Ashish Ranjan · Accepted Answer · 2020-05-11 05:28:59Z

2

Your clicks are overriding the stored data in every click, you may need to fetch the existing store and update it before pushing a new one.

Also, your localStotrage would only store strings so you would need to convert the array to a string before storing it.

$( 'ul.namelist>li' ).on( "click", function() {
    var items  = localStorage.get('items') ? JSON.parse(localStorage.get('items')) : [];    
    items.push( $( this ).text() );
    localStorage.setItem("items", JSON.stringify(items));     
});
})

edited May 11, 2020 at 5:28

answered May 11, 2020 at 5:21

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

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

2 Comments

charlietfl Over a year ago

Have to stringify the array also to set in storage

Ashish Ranjan Over a year ago

@charlietfl Right, had missed that.

Aravind Kumar J · Accepted Answer · 2020-05-11 05:43:05Z

0

Local storage holds data as a string, so, do JSON.stringify() before storing it to local storage. Also, fetch the current state from storage before making any updates.

$('ul.namelist>li').on("click", function() {
    var items = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];
    items.push($(this).text());
    localStorage.setItem("items", JSON.stringify(items));
});

edited May 11, 2020 at 5:43

answered May 11, 2020 at 5:33

Aravind Kumar J

12 bronze badges

Collectives™ on Stack Overflow

Javascript array .push is not creating array items

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related