HTML5 localStorage Value Array Error

  • (2 Pages)
  • +
  • 1
  • 2

22 Replies - 4279 Views - Last Post: 11 April 2013 - 12:37 PM

#16 Liam O'Byrne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 41
  • Joined: 02-April 13

Re: HTML5 localStorage Value Array Error

Posted 09 April 2013 - 03:04 PM

Hi Atli,

I am now managing to store multiple values into 2 arrays. I have updated the jsfiddle so you can see what I have done.

Now, the next part is for me to display these values in a list form like so:

"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."

I am aware that the getItem function is used to retrieve the value(s) from localStorage. But how do I display only 1 value per sentence without displaying every value in the array?
Was This Post Helpful? 0
  • +
  • -

#17 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: HTML5 localStorage Value Array Error

Posted 09 April 2013 - 05:14 PM

View PostAtli, on 09 April 2013 - 02:48 PM, said:

The code I showed in the rest of that post demonstrates exactly what has to happen if you want to store an array or object inside the Storage mechanisms.

Have you tried implementing this in any way like I demonstrated? There is no sign of it in your jsFiddle code. - If you have but it failed to work, show us the code. We can't help you if you ignore our advice and/or don't show us the things you try.


I would agree with 'Atli's post. Using his code I posted (#10) an example of how to store the pseudo-array elements
into a string and re-access them at a later time without over-writing the original.

It does nothing with your navigation information, but that should be pretty simple to modify if you look at the code provided.
Was This Post Helpful? 0
  • +
  • -

#18 Liam O'Byrne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 41
  • Joined: 02-April 13

Re: HTML5 localStorage Value Array Error

Posted 10 April 2013 - 07:31 AM

As I stated in post #16, I can now store an array of values into localStorage and retrieve them all.

However, when I retrieve localStorage values, I end up displaying all of the values in each array. How can I return just 1 value from an array?

As I stated, my aim is to produce a list of records like this:

"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."

Thank you for your responses!
Was This Post Helpful? 0
  • +
  • -

#19 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: HTML5 localStorage Value Array Error

Posted 10 April 2013 - 08:31 AM

View PostLiam O, on 10 April 2013 - 08:31 AM, said:

As I stated in post #16, I can now store an array of values into localStorage and retrieve them all.

However, when I retrieve localStorage values, I end up displaying all of the values in each array. How can I return just 1 value from an array?

As I stated, my aim is to produce a list of records like this:

"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."

Thank you for your responses!


For clarification:

You want to create a list of records (which you say you have accomplished)
but now you want to display only ONE at a time (?)

Is that the final product? :online2long:
Was This Post Helpful? 0
  • +
  • -

#20 Liam O'Byrne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 41
  • Joined: 02-April 13

Re: HTML5 localStorage Value Array Error

Posted 10 April 2013 - 08:57 AM

Hi JMRKER,

Thanks for your time! Yes, my aim is to produce the list like above.

I currently have 3 arrays (distances, durations, timestamps). (http://jsfiddle.net/ZjBu2/1/)

When the user clicks 'Stop' this adds new values to the 3 arrays. Success!

Now I want to retrieve each value in a list like form like so:

"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."


When I try to retrieve the value from the array I end up returning all the values in that array like so:

"You travelled "["34","56","32","8","25","25"]" in on "["10 April 2013 16:42:25","10 April 2013 16:42:43","10 April 2013 16:42:56"]"."

I guess my question is how do I retrieve only value at a time per array per sentence at a time?
Was This Post Helpful? 0
  • +
  • -

#21 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: HTML5 localStorage Value Array Error

Posted 10 April 2013 - 01:23 PM

View PostLiam O, on 10 April 2013 - 09:57 AM, said:

...
I currently have 3 arrays (distances, durations, timestamps). (http://jsfiddle.net/ZjBu2/1/)

When the user clicks 'Stop' this adds new values to the 3 arrays. Success!

Now I want to retrieve each value in a list like form like so:

"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."
"You travelled (whatever miles) in on (timestamp)."


When I try to retrieve the value from the array I end up returning all the values in that array like so:

"You travelled "["34","56","32","8","25","25"]" in on "["10 April 2013 16:42:25","10 April 2013 16:42:43","10 April 2013 16:42:56"]"."

I guess my question is how do I retrieve only value at a time per array per sentence at a time?


Question: Why have you created THREE arrays to hold ONE records worth of information?
Also, why do you have 6 elements in the "travelled" array above but only 3 elements in the "timestamp" portion?

Suggestion: Treat each of the "You travelled (whatever miles) in on (timestamp)."
entries as a single record which contains the (miles) and (timestamp).
See post #10 on how this was accomplished with the time and info fields.

Then you can parse the JSON string into individual records, each of which will contain
the (miles) and (timestamp) you want to display.
Display the individual records using a pointer to the individual records as in arrayRecord[i] where 'i' would range from 0..maximum # records in array.
Show only one record, not the entire array.
Was This Post Helpful? 0
  • +
  • -

#22 Liam O'Byrne  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 41
  • Joined: 02-April 13

Re: HTML5 localStorage Value Array Error

Posted 11 April 2013 - 10:10 AM

Hi JMRKER, I am now able to return values in a list like form. The code below is what I am using:

// History Information Array
var historyInfo = localStorage.getItem("history");
if (!historyInfo) {
historyInfo = [];
} else {
historyInfo = JSON.parse(historyInfo);
}
historyInfo.push("You travelled " + distance + " in " + duration + " on " + timestamp + ".<br>");
	
localStorage.setItem("history", JSON.stringify(historyInfo));


However, when I retrieve the array values to my web page I get something like this:

["You travelled 0 in 00:00.05 on 11 April 2013 18:02:33.
","You travelled 0 in 00:00.08 on 11 April 2013 18:03:31.
"]

How can I get rid of the the the useless characters ([, ", ,) ?

Thanks
Was This Post Helpful? 0
  • +
  • -

#23 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: HTML5 localStorage Value Array Error

Posted 11 April 2013 - 12:37 PM

See if this modification of post #10 makes any sense to you.
If it does, then incorporate the logic into your script.
<!DOCTYPE HTML>
<html>
<head>
<title> Local Storage Arrays </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
 #clrButton { display:none; }
</style>

</head>
<body>
<input type="text" id="distance">
 <button onclick="addDistance($_('distance').value)"> Save </button>
 <input type="checkbox" id="clrCBox" onclick="clrCheck()">
 <button id="clrButton" onclick="clearDistances()">Clear</button>
 <br>
 <button onclick="recPtr=0;showRecs()">|&lt;&lt;</button>
 <button onclick="recPtr--;showRecs()">&lt;</button>
 <button onclick="recPtr++;showRecs()">&gt;</button>
 <button onclick="recPtr=recs.length;showRecs()">&gt;&gt;|</button>
 <button onclick="showDistances()">Show All</button>

<pre id="history"></pre>

<script type="text/javascript">
var recs = [];
var recPtr = 0;

// Modified from:
//   http://www.dreamincode.net/forums/topic/317492-html5-localstorage-value-array-error/
/* Add a distance to the distances object in the localStorage.
 *
 * @param {Number} distance The distance to store.
 */
function addDistance(distance) {
// Fetch the "distances" object from the localStorage and
// either unserialize it using JSON.parse, or create a new
// array if the localStorage has no distances object.
  var distances = localStorage.getItem("distances");
  if (!distances) { distances = []; }
             else { distances = JSON.parse(distances); }
	
// Add the new distance to the distances array as a
// new object, containing the distance and the current timestamp.
  distances.push({distance: distance, timestamp: (new Date()).getTime()});
	
// Serialize the new distances object using JSON.stringify
// and overwrite the old distances string in the localStorage.
  localStorage.setItem("distances", JSON.stringify(distances));
  showDistances();
}

function $_(IDS) { return document.getElementById(IDS); }
function padN(n) { return n = (n < 10) ? '0'+n : n; }

function showSingleRecord(ptr) {
      var str = '';
      ts = new Date(recs[ptr]['timestamp']);
      str += (padN(ts.getMonth()+1))+'/'+padN(ts.getDate())+'/'+ts.getFullYear()+' ';
      var hrs = ts.getHours()+1;  var ampm = '';  // 'am';
//      if (hrs > 12) { hrs -= 12; ampm = 'pm'; }
      str += padN(hrs)+':'+padN(ts.getMinutes())+':'+padN(ts.getSeconds())+' '+ampm+' - ';
      str += recs[ptr]['distance'] + '<br>';
      return str;
}

function showDistances() {
  var str = '';
/* */
  var ts;
  recs = JSON.parse(localStorage.getItem('distances'));  // .reverse();  // alt. display (LIFO)
  if (recs != null) {
    for (var i=0; i<recs.length; i++) { str += showSingleRecord(i); }
  } else { str = 'Nothing to display yet!'; }
/* */
//  str = localStorage.getItem('distances');  // raw JSON display for testing purposes only

  $_('history').innerHTML = str;  // localStorage.getItem('distances');
}
function showRecs() {
  if (recPtr < 0) { recPtr = 0; }
  if (recPtr > recs.length-1) { recPtr = recs.length-1; }
  $_('history').innerHTML = showSingleRecord(recPtr);
}

function clrCheck() {
  if ($_('clrCBox').checked == true) { $_('clrButton').style.display='inline' }
                                else { $_('clrButton').style.display = 'none'; }
}
function clearDistances() {
  if ($_('clrCBox').checked) { localStorage.removeItem("distances"); }
  showDistances();
}
window.onload = function() { showDistances(); }
</script>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2