SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    localStorage.removeItem not working when passing id from jquery

    Im playing with HTML5 LocalStorage and it seems pretty straight forward for the most part.

    Load the page with the following to insert the test values.
    Code:
    localStorage.setItem("artist-0", "0"); //saves to the database, key/value
    		localStorage.setItem("artist-1", "1"); 
    		localStorage.setItem("artist-2", "2"); 
    		localStorage.setItem("artist-3", "3");
    I then generate a list from the stored data.

    Code:
    var hideartist = '';
    			for (var i = 0; i < localStorage.length; i++){ 
    				hideartist += "<li id=\"artist-" + localStorage.getItem("artist-"+i) + " \">" + localStorage.getItem("artist-"+i) + "</li>";
    				
    				}
    			//alert(hideartist); // show hideartist
      			$('#artisthidelist').append(hideartist); // add top artists
    However, when I try and remove a value using a key that's generated by grabbing the id atribute of an element from jquery it just seems to fail.

    Im struggling with is below. I can see from the alert that the 'key' seems to be Ok.

    Code:
    $("#artisthidelist li").live("click", function () {
    			var deletenum = '';
    			
    			var deletenum = $(this).attr("id")
    			alert(deletenum);
    			localStorage.removeItem(deletenum);
    		});
    Any ideas what Im doing wrong? I've set up a test page here

  2. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you are trying to remove an item based on it's value not the index?

    Perhaps try this:
    Code:
    var hideartist = '';
    			for (var i = 0; i < localStorage.length; i++){ 
    				hideartist += "<li id=\"artist-" + i + " \">" + localStorage.getItem("artist-"+i) + "</li>";
     
    				}
    			//alert(hideartist); // show hideartist
      			$('#artisthidelist').append(hideartist); // add top artists

  3. #3
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Anthony - Maybe I'm misunderstanding you, but that code is for listing the items in local storage as <li> elements and is working Ok.

    It is the removing I am having problems with.

  4. #4
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    // works
    Code:
    		var deletenum = 'artist-2';
    		localStorage.removeItem(deletenum);
    // works
    Code:
    var deletenum = '3';
    		localStorage.removeItem("artist-"+deletenum);
    // doesn't work
    Code:
    $("#artisthidelist li").live("click", function () {
    			var deletenum = '';
    			var deletenum = $(this).attr("id")
    			localStorage.removeItem(deletenum);
    		});

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    In your id attribute you have a space after the number which would cause an incorrect value to be passed into the removeItem method.

  6. #6
    SitePoint Addict jamus's Avatar
    Join Date
    Jul 2004
    Location
    Devon, UK
    Posts
    301
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    In your id attribute you have a space after the number which would cause an incorrect value to be passed into the removeItem method.
    Thanks Sgt! Wood for trees.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •