I'm trying to build a history list of clicked clicked page elements and store that list into HTML local storage, to be later displayed back to the user. The main pre-requisite is that the list cannot contain duplicates, so for example if the user clicks on item A and then on item B and again back on item A, only A and B are recorded. The third click is not recorded because it is not unique.

I'm also using persist.js.

I noticed that I am able to name the storage and give it a key and both are stored together in the real key of the localstorage thus: myStorageName>myKeyand my value is whatever I put there.

Here's the thing. I know you can store stringyfied JSON there but my list is built up from simple javascript variables one at at time.

I know what to do for the first click:

myStorageName.set(myKey, myCurrentElementId); // myCurrentElementId = this.id

now on the second click this is where I'm beginning to getting stuck. There is the original variable value already stored, now I want to append the new variable value. Assume that I can get the value from the store like this:

var dataExtract = myStorageName.get(myKey);
myObject = JSON.parse(dataExtract);

But how do I then turn this into a JSONstring -able thing (sorry I don't even know what it should be) that contains only a list of unique values. Does this make any sense to anyone?

I'm trying to build a history list of clicked clicked page elements and store that list into HTML local storage, to be later displayed back to the user. The main pre-requisite is that the list cannot contain duplicates, so for example if the user clicks on item A and then on item B and again back on item A, only A and B are recorded. The third click is not recorded because it is not unique.

I'm also using persist.js.

I noticed that I am able to name the storage and give it a key and both are stored together in the real key of the localstorage thus: myStorageName>myKeyand my value is whatever I put there.

Here's the thing. I know you can store stringyfied JSON there but my list is built up from simple javascript variables one at at time.

I know what to do for the first click:

myStorageName.set(myKey, myCurrentElementId); // myCurrentElementId = this.id

now on the second click this is where I'm beginning to getting stuck. There is the original variable value already stored, now I want to append the new variable value. Assume that I can get the value from the store like this:

var dataExtract = myStorageName.get(myKey);
myObject = JSON.parse(dataExtract);

But how do I then turn this into a JSONstring -able thing (sorry I don't even know what it should be) that contains only a list of unique values. Does this make any sense to anyone?

• javascript
• html
• local-storage

• 1 Do you mean: var dataExtract = JSON.stringify(myObject) in conjunction with var myObject = JSON.parse(dataExtract);? – Rob W Commented Sep 24, 2011 at 22:01
• well probably that would be the result. But I think somehow I'd have to restructure myObjectso that the key/pair relationships made sense. – T9b Commented Sep 24, 2011 at 22:06

3 Answers 3

First of all, you don't want to keep writing to/from localStorage everytime a link is clicked, because this'll slow down your page. Keep an updated Array populated with the element ids, then write to localStorage before the user navigates away from the page (by binding to the window's onbeforeunload event, for instance).

First:

var clickedLinks = []; // this Array will hold the ids of the clicked links
function uniqueClick(id){
    return !~clickedLinks.indexOf(id); // this tests whether the id is already in the Array
};

In your click handler:

if(uniqueClick(this.id)){
    clickedLinks.push(this.id); // append the new element id to the Array
}

Bind to window.onunload to save the Array before the user navigates from the page:

window.onunload = function(){
    localStorage.setItem('clickedLinks',JSON.stringify(clickedLinks)); // stringify the Array and save to localStorage
}

To retrieve clickedLinks on subsequent page visit:

// convert the String back to an Array; try/catch used here in case the value in localStorage is modified and unable to be parsed, in which case clickedLinks will be initialized to an empty Array
try{
    var clickedLinks = JSON.parse(localStorage.getItem('clickedLinks')) || [];
}catch(e){
    var clickedLinks = [];
}

You may want to replace the first line (var clickedLinks = [];) with this last bit of code, as it will initialize the Array if it doesn't exist.

UPDATE:

IE8 does not support Array.indexOf. Alternatives might be:

1. use jQuery's $.inArray by replacing !~clickedLinks.indexOf(id); with !~$.inArray(id, clickedLinks);
2. Detect whether Array.prototype.indexOf is supported. If not, shim it with the code provided on this page.

Your model has an error. At the first time, you save a primitive value. Then, you want to "append" another value to it. Seems like you actually want to use an object:

var myObj = localStorage.getItem("myName");
if(myObj) myObj = JSON.parse(myObj); //Variable exists
else myObj = {}; //Elsem create a new object

function appendNewValue(name, value){
    myObj[name] = value;
    localStorage.setItem("myName", JSON.stringify(myObj));
    /* Saves data immediately. Instead of saving every time, you can
       also add this persistence feature to the `(before)unload` handler. */
}

I suggest to define in your code this:

localStorage.set= function(key,val)
{
  localStorage.setItem(JSON.stringify(val));
}
localStorage.get = function(key,defval)
{
  var val = localStorage.getItem(key);
  if( typeof val == "undefined" ) return defval;
  return JSON.parse(val);
}

and use them instead of get/setItem. They will give you ready to use JS values that you can use in the way you need.