как создать список уникальных значений и систематически хранить их в локальном хранилище

Question

Я пытаюсь создать список истории элементов страницы, по которым щелкнули по клику, и сохранить этот список в локальном хранилище HTML, чтобы позже отобразить его пользователю.Основным предварительным условием является то, что список не может содержать дубликаты, например, если пользователь нажимает на элемент A, а затем на элемент B и снова на элемент A, записываются только A и B.Третий щелчок не записывается, поскольку он не уникален.

Я также использую persist.js .

Я заметил, что могу назвать хранилище идайте ему ключ, и оба хранятся вместе в реальном ключе локального хранилища, таким образом: myStorageName>myKey и моя ценность - это то, что я положил туда.

Вот в чем дело.Я знаю, что вы можете хранить там строковый JSON, но мой список составлен из простых переменных javascript по одной за раз.

Я знаю, что делать для первого клика:

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

Теперь, после второго клика, я начинаю застрять.Исходное значение переменной уже сохранено, теперь я хочу добавить новое значение переменной.Предположим, что я могу получить значение из магазина следующим образом:

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

Но как мне затем превратить это в JSONstring -able thing (извините, я даже незнать, что это должно быть), который содержит только список уникальных значений.Имеет ли это какой-либо смысл для кого-либо?

Answer 1

Прежде всего, вы не хотите продолжать писать в / из localStorage каждый раз, когда нажимаете на ссылку, потому что это замедлит вашу страницу.Сохраните обновленный массив, заполненный идентификаторами элементов, затем запишите в localStorage, прежде чем пользователь уйдет со страницы (например, путем привязки к событию onbeforeunload окна).

Первый:

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

В вашем обработчике кликов:

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

Привязка к window.onunload для сохранения массива до перехода пользователя со страницы:

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

Чтобы получить clickedLinks при последующем посещении страницы:

// 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 = [];
}

Возможно, вы захотите заменить первую строку (var clickedLinks = [];) на этот последний бит кода, так как он инициализирует массивесли он не существует.

---

ОБНОВЛЕНИЕ:

IE8 не поддерживает Array.indexOf.Альтернативы могут быть:

1. использовать jQuery's $. InArray , заменив !~clickedLinks.indexOf(id); на !~$.inArray(id, clickedLinks);
2. Определить, поддерживается ли Array.prototype.indexOf.Если нет, то используйте код, указанный на этой странице .

Answer 2

Ваша модель имеет ошибку.В первый раз вы сохраняете примитивное значение.Затем вы хотите «добавить» другое значение к нему.Похоже, вы действительно хотите использовать объект:

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

Answer 3

Предлагаю определить в вашем коде это:

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

и используйте их вместо get / setItem. Они дадут вам готовый использовать значения JS, которые вы можете использовать так, как вам нужно.