Prepending on load if cookie exists

Question

I have a div which contains multiple a tags each of which contains a unique href attribute. Each link is marked with a check mark upon click. I am trying to set up a session cookie for the click, such that when the user navigates away from and back to the page, the check mark indicating a followed link is still present. I have set up an array (strArray), which banks cookies by converting the history object to a string and using the .push() method, to check against an array of hrefs generated via:

var urlArray = $(".holder a").map(function() {
  return $(this).attr("href");
}).get();

I cannot figure out why the strArray is continuously being rewritten upon clicking a link or if my script is achieving the desired result, that is, if it is in fact prepending links after navigating away from the page and back again. Can anyone point me in the right direction?

See my fiddle here: https://jsfiddle.net/tfrx9tyf/19/

Answer 1

As charlietfl mentioned, localstorage would be a better fit for this, here is how I would do it:

Working jsFiddle

html:

<a href="https://somesite/index.php" class="remember-links">some link</a>
<br>
<a href="https://somesite/home.php" class="remember-links">some other link</a>
<br>
<button class="remove-remembered">Remove remembered </button>

js

/**
 * Feature detect + local reference for simple use of local storage
 * if (storage) {
 *    storage.setItem('key', 'value');
 *    storage.getItem('key');
 * }
 *
 */
var storage;
var fail;
var uid;
try {
  uid = new Date;
  (storage = window.localStorage).setItem(uid, uid);
  fail = storage.getItem(uid) != uid;
  storage.removeItem(uid);
  fail && (storage = false);
} catch (exception) {}
/* end  Feature detect + local reference */




$(document).on('click', '.remember-links', function(e) {
  var $this = $(this);
  if (storage) {
    var thisLink = $this.attr('href'); // get the clicked href
    var links = storage.getItem('rememberedLinks'); // get all the previously clicked links as a string
    links = (!links || links == '') ? [] : links.split('||'); // if present, split the links into an array, or just make an empty array
    if ($.inArray(thisLink, links) === -1) links.push(thisLink); // if the link is not already in the list, add it
    console.log(links);
    links = links.join('||'); // join the array into a string separated by a string not likely to appear in an actual link "||"
    storage.setItem('rememberedLinks', links); // store the new value
    $this.addClass('remembered');
  } 
});


$(document).on('click', '.remove-remembered', function(e) {
  if (storage) {
    storage.setItem('rememberedLinks', '');
    $('.remembered').removeClass('remembered');
  }
});

function checkLinks() {
  if (storage) {
    var links = storage.getItem('rememberedLinks') || ''; // get all the previously clicked links as a string
    console.log(links);
    links = (!links || links == '') ? [] : links.split('||'); // if present, split the links into an array, or just make an empty array
    console.log(links);
    $('.remember-links').each(function() {
      var $this = $(this);
      var thisLink = $this.attr('href'); // get the current href 
      if ($.inArray(thisLink, links) > -1) $this.addClass('remembered'); // if remembered, do something with the link in the dom
    });
  }
}

// on load, check the links to see if they need to be marked.
$(function() {
  checkLinks();
});