HTML5 localStorage Key Loop

This site is best viewed in a modern browser with JavaScript enabled.

Liam_O_Byrne

I currently have the following JavaScript:

// 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.

[HR][/HR]

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?

Tcobb

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:

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);
}

rnd_me

for(i in localStorage){console.log(i);}

Liam_O_Byrne

Hi!

Here is a link to jsfiddle .

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

Liam_O_Byrne

http://jsfiddle.net/ePASe/2/

rnd_me

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.

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)"

Liam_O_Byrne

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.

Tcobb

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.

JMRKER

Might want to note for others that you have additional solutions
on: http://www.dreamincode.net/forums/topic/317492-html5-localstorage-value-array-error/

rnd_me

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.