在电商网站中，用户经常需要查看多个商品并进行比较，但是如果用户需要退出或者关闭页面，他们就不能方便地找到之前浏览过的商品。因此，实现一个记录最近浏览过的商品功能对于提高用户体验非常重要。在本文中，我们将使用 jQuery.cookie.js 库来实现此功能。
什么是jQuery.cookie.js库？
jQuery.cookie.js 是一个简单易用的 JavaScript 库，它可以帮助我们在客户端存储和读取 cookie。它的 API 很简单，而且与 jQuery 兼容，因此可以轻松地将其集成到现有的项目中。
最近浏览商品功能的实现
现在，让我们来看一下如何使用 jQuery.cookie.js 来记录最近浏览过的商品。首先，我们需要定义一个数组来存储最近浏览过的商品 ID。然后，每当用户浏览一个新商品时，我们将该商品的 ID 添加到数组中，并将该数组存储为 cookie。
-- -------------------- ---- -------
-- ------------------ --
--- -------------- - ---
-- ----- ------ -----
-- ----------------------------- -
-------------- - -----------------------------------------
-
-- -------------- -- ------
------------------------- ---------- -
--- --------- - -------------------
-- --------------------- --------------- --- --- -
-------------------------------
-
-- -------------- ----------- - -
--------------------------- ------------------------------- - -------- - ---
---在上面的示例代码中，我们使用了 $.parseJSON() 来解析从 cookie 中读取出来的字符串数组，这样可以得到一个 JavaScript 数组。然后，在用户浏览一个新商品时，我们使用 $.inArray() 函数来判断该商品是否已经存在于数组中。如果不存在，就将其添加到数组中，并使用 JSON.stringify() 函数将数组转换为字符串。最后，我们使用 $.cookie() 函数将该字符串存储为名为 "viewed_products" 的 cookie。
现在，每当用户浏览一个新商品时，它的 ID 就会被添加到 cookie 中，并且该 cookie 在接下来的 7 天内都将保留。这意味着用户可以在未登录或退出并重新进入网站后仍然能够看到他们最近浏览过的商品列表。
总结
在本文中，我们介绍了如何使用 jQuery.cookie.js 库来实现记录最近浏览过的商品功能。我们首先定义了一个空数组来存储最近浏览过的商品 ID，然后将该数组存储为 cookie。每当用户浏览一个新商品时，它的 ID 就会被添加到该数组中，并将该数组再次存储为 cookie。通过这种方法，我们可以轻松地实现记录最近浏览过的商品功能，并提高用户体验。
希望本文能够对前端开发者们有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/851