www.webdeveloper.com
Results 1 to 10 of 10

Thread: HTML5 localStorage Key Loop

  1. #1
    Join Date
    Mar 2013
    Posts
    13

    HTML5 localStorage Key Loop

    I currently have the following JavaScript:

    Code:
    // localStorage
    
    localStorage.setItem("distance", distance);
    localStorage.setItem("timestamp", timestamp);
    
    if (typeof (Storage) !== "undefined") {
        if (localStorage.getItem("distance") === null || localStorage.getItem("timestamp") === null) {
            document.getElementById("history").innerHTML = "There are currently no records to display.";
        } else {
            document.getElementById("history").innerHTML = "You travelled " + localStorage.getItem("distance") + " miles in " + "on " + localStorage.getItem("timestamp") + ".";
        }
    } else {
        document.getElementById("history").innerHTML = "Your browser does not support the localStorage API.";
    }
    This obtains the "distance" and "timestamp" information and appends it into a sentence.

    EXAMPLE
    You travelled 3 miles in on 02 April 2013 15:52:36.




    However, I want to create a list. I have tried using the localStorage.length and localStorage.key(i) elements, but it does not create a loop. It overwrites my existing localStorage content values.

    How can I sort this?

  2. #2
    Join Date
    Mar 2009
    Posts
    467
    Maybe I'm misunderstanding what's going on but if you want a list you can't use the same name variables for separate entries, otherwise you are just overwriting the previous data. You need to keep track of how many entries you have, such as by using a 'listIndex' variable in localStorage and then giving each entry a number index, as in 'distance0','distance1', etc. Make sure to increment the value of 'listIndex' every time you make an addition.

    Example:

    Code:
    var len = localStorage.getItem('listIndex');
    len = len * 1; //make sure its interpreted as a number
    var i, val, dist, dateTime;
    
    for(i = 0; i < len; i++){
       val = 'distance' + i;
       dist = localStorage.getItem(val);
       val =  'timeStamp' + i;
       dateTime = localStorage.getItem(val);
       alert(dist + "at " + dateTime);
    }

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Code:
    for(i in localStorage){console.log(i);}

  4. #4
    Join Date
    Mar 2013
    Posts
    13
    Hi!

    Here is a link to jsfiddle .

    Tcobb's solution did not work! It still continues to overwrite existing values in localStorage.

  5. #5
    Join Date
    Mar 2013
    Posts
    13

  6. #6
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    use a global object or array to store the records in localStroage, let's call it hist.

    with some re-tooling, you can then easily use hist and local storage to save and display your data.
    Code:
    here is a rough pattern outline, not the exact code per se:
    
     save: hist.push({time: timestamp, dist: distance })
     store: localStorage.hist=JSON.stringify(hist) ;
     load:  hist=JSON.parse(localStorage.hist);
    render: document.getElementById("history").innerHTML = hist.map(function(item, index){
        return "went "+ item.dist+ "  @"+ item.time;
    }).join("<br />") || "(No history Saved)"
    Last edited by rnd me; 04-03-2013 at 02:36 PM.

  7. #7
    Join Date
    Mar 2013
    Posts
    13
    Hi rnd me!

    Thanks for your time and effort! I tried your solution and I have successfully managed to store both distance and timestamp values into an array called hist.

    However, when I attempt to add more values, it overwrites the existing values.

    EXAMPLE
    You travelled 23 miles in on 23 April 2013.

    AIM
    You travelled 27 miles in on 27 April 2013.
    You travelled 32 miles in on 3 November 2013.
    You travelled 12 miles in on 21 April 2010.
    You travelled 99 miles in on 31 December 2012.
    and so on...

    Essentially, I would like to produce a list.

  8. #8
    Join Date
    Mar 2009
    Posts
    467
    If you have new data AND pre-existing data you must:
    (1) retrieve the old data from local storage
    (2) add the new data to the old data.
    (3) store it ALL again in localStorage
    (4) Do it in the order set forth in items 1-3 above.

    If it is overwriting the old data you aren't doing this.

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,355
    Might want to note for others that you have additional solutions
    on: http://www.dreamincode.net/forums/to...e-array-error/

  10. #10
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    your need to use the load routine in your ready() or onload() to make sure you load the old values.
    saving is two-step:
    1. push the new one into hist
    2. save hist ot localStrorage

    in practice, you can often just save in an onbeforeunload() event instead of each time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles