Блог

У меня есть a div , который содержит несколько a тегов, каждый из которых содержит уникальный href атрибут. Каждая ссылка помечается галочкой при нажатии. Я пытаюсь настроить сеансовый файл cookie для клика, чтобы при переходе пользователя от страницы к странице и обратно флажок, указывающий на переход по ссылке, все еще присутствовал. Я настроил array ( strArray ), который хранит файлы cookie, преобразуя history объект в строку и используя .push() метод, для проверки по массиву hrefs , сгенерированному с помощью:

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

Я не могу понять, почему strArray он постоянно переписывается при нажатии на ссылку или если мой скрипт достигает желаемого результата, то есть, если он фактически добавляет ссылки после перехода со страницы и обратно. Кто-нибудь может указать мне правильное направление?

Смотрите мою скрипку здесь: https://jsfiddle.net/tfrx9tyf/19 /

Как упоминал charlietfl, localstorage лучше подходит для этого, вот как я бы это сделал:

Рабочий 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 amp;amp; (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 sepparated by a string not likely to appear in an actuall 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();
});