华山资源网

jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
网络编程 2024/12/25 佚名
3 1

1、cookie是什么：

①、cookie 是存储于访问者计算机中的变量。每当一台计算机通过浏览器来访问某个页面时，那么就可以通过 JavaScript 来创建和读取 cookie。

　　②、实际上 cookie 是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

　　③、不同浏览器对 cookie 的实现也不一样。即保存在一个浏览器中的 cookie 到另外一个浏览器是 不能获取的。

PS：cookie 和 session 都能保存计算机中的变量，但是 session 是运行在服务器端的，而客户端我们只能通过 cookie 来读取和创建变量。

2、cookie的作用：

　①、用户在第一次登录某个网站时，要输入用户名密码，如果觉得很麻烦，下次登录时不想输入了，那么就在第一次登录时将登录信息存放在 cookie 中。下次登录时我们就可以直接获取 cookie 中的用户名密码来进行登录。
PS:虽然 浏览器将信息保存在 cookie 中是加密了，但是可能还是会造成不安全的信息泄露

　　②、类似于购物车性质的功能，第一次用户将某些商品放入购物车了，但是临时有事，将电脑关闭了，下次再次进入此网站，我们可以通过读取 cookie 中的信息，恢复购物车中的物品。
PS：实际操作中，这种方法很少用了，基本上都是将这些信息存储在数据库中。然后通过查询数据库的信息来恢复购物车里的物品

　　③、页面之间的传值。在实际开发中，我们往往会通过一个页面跳转到另外一个页面。后端服务器我们可以通过数据库，session 等来传递页面所需要的值。但是在浏览器端，我们可以将数据保存在 cookie 中，然后在另外页面再去获取 cookie 中的数据。

PS：这里要注意 cookie 的时效性，不然会造成获取 cookie 中数据的混乱。

正文开始，下面通过代码给大家介绍jq cookie 本地收藏功能，

JS核心部分

说明：用split(',')分隔字符串转换数组数组，把上一次收藏的id 和这一次的收藏用 + “,”+ 当前id 来存入，到时候用split() 方法 转换成数组即可。

<script type="text/javascript">
 $(function(){
 var arr = $.cookie("attractionsid").split(',');
 console.log($.cookie());
 for (var i = 0; i < arr.length; i++) {
 if(parseInt(arr[i]) == parseInt( 请填入ID值 )){
 //判断是否收藏过，收藏过亮图标
 $('#shoucang2').removeClass('hide');
 $('#shoucang1').addClass('hide');
 break;
 }
 };
 $("#shoucang").click(function(event) {
 var judge = true;
 console.log(arr)
 for (var i = 0; i < arr.length; i++) {
 if(parseInt(arr[i]) == parseInt(请填入ID值)){
  arr.splice(i,1);
  $.cookie("attractionsid", arr, { expires: 361});
  console.log('取消收藏');
  $('#shoucang2').addClass('hide');
  $('#shoucang1').removeClass('hide');
  judge = false;
  break;
 }
 };
 if(judge){
 $.cookie("attractionsid", $.cookie("attractionsid") + ","+"请填入ID值", { expires: 361});
 console.log('收藏成功');
 $('#shoucang2').removeClass('hide');
 $('#shoucang1').addClass('hide');
 }
 });
 })
</script>

总结

以上所述是小编给大家介绍的jQuery利用cookie 实现本地收藏功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com