Question

我正在尝试构建单击的已单击页面元素的历史列表，并将该列表存储到HTML本地存储中，以便稍后显示回用户。主要先决条件是列表不能包含重复项，因此例如，如果用户单击项目A然后单击项目B并再次返回项目A，则仅记录A和B.第三次点击不会被记录，因为它不是唯一的。

我也在使用persist.js。

我注意到我能够命名存储并给它一个密钥，并且两者都存储在localstorage的真实密钥中，因此：myStorageName>myKey我的价值就是我放在那里的任何东西。

这就是事情。我知道你可以在那里存储stringyfied JSON但我的列表是从一个简单的javascript变量构建的。

我知道第一次点击该怎么做：

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

现在第二次点击这是我开始陷入困境的地方。已经存储了原始变量值，现在我想追加新的变量值。假设我可以从商店获得这样的值：

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

但是我怎么把它变成一个JSONstring -able thing（对不起，我甚至不知道应该是什么）只包含一个唯一值列表。这对任何人都有意义吗？

Answer 1

首先，每次点击链接时，您都不希望继续写入/来自localStorage，因为这会降低您的页面速度。保持更新的数组填充元素ID，然后在用户导航离开页面之前写入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。替代方案可能是：

将!~clickedLinks.indexOf(id);替换为!~$.inArray(id, clickedLinks);

$.inArray

检测是否支持Array.prototype.indexOf。如果没有，请使用this page上提供的代码进行填充。

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值。

如何创建唯一值列表并系统地将它们存储在localstorage中

3 个答案: