如何创建一个跨页面存储多个值的 cookie 按钮答案

【问题标题】：How to create a one cookie button that stores multiple values across pages如何创建一个跨页面存储多个值的 cookie 按钮
【发布时间】：2018-08-21 14:19:26
【问题描述】：

我正在使用下面的代码在每次点击同一个按钮时设置一个cookie，每次点击都会增加一个数字值并将产品的标题保存为值（例如名称：1，值：汽车）：

var num=1;
  function addCookie() {

        var expString = "; expires=" + date.toGMTString();
        var cookievalue=escape(document.querySelector("[name=addpart]").value) + ";";
        document.cookie=num + "=" + cookievalue + expString + "; path=/"; 
        num++;
    }

它在我的页面上运行良好，每次点击它时都会设置一个新的 cookie 名称，然后是 '1'，然后是 '2'，然后是 '3' 等等，但显然这只会让我：

名称：1 值：汽车
名称：2 值：汽车
名称：3 值：汽车

但是，当我转到另一个页面并再次单击该按钮时，它会覆盖名称为 1 的 cookie 并再次启动该过程。

我想知道如何跨页面继续计算此按钮的名称？ 这样用户就可以浏览产品并单击该按钮，该按钮实质上会生成一个列表，以后可以调用：

名称：1 值：汽车
名称：2 值：自行车
名称：3 值：火车

我知道为每个页面创建新按钮会更容易，但我在我的网站上使用模板系统，而且我们有成千上万的产品页面，所以这对我来说不是一个可行的选择。

【问题讨论】：

我认为更好的方法是在你的cookie中保存一个json编码的数组。这样，您就不会在访问者的浏览器上创建大量 cookie。对您来说，管理起来更简单。
“浏览产品并单击按钮，该按钮实质上会生成一个可以稍后调用的列表” ... 那么购物车呢？他们通常处理会话和数据库。

标签： javascript php cookies

【解决方案1】：

存储对象数组非常容易，我认为使用 localStorage 代替 cookie 更好。

//example of first structure
localStorage.setItem("visits", JSON.stringify({"1":[],"2":[],"3":[]}));

//getting the item
var visits = JSON.parse(localStorage.getItem("visits"));

//different visits

visits["1"].push("Car");
visits["1"].push("Bike");
visits["1"].push("Something");

visits["2"].push("Bike");
visits["2"].push("Bike");
visits["2"].push("Something");

visits["3"].push("Something");
visits["3"].push("Something");
visits["3"].push("Something");

//setting the item
localStorage.setItem("visits", JSON.stringify(visits));

console.log(visits)

这里的例子https://jsfiddle.net/0kp9s2bv/

【讨论】：