jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)


Posted in jQuery onNovember 07, 2019

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 实现本地收藏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
使用jQuery.Pin垂直滚动时固定导航
May 24 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
解决jquery appaend元素中id绑定事件失效的问题
Sep 12 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
Javascript和jquery在selenium的使用过程
Oct 31 #jQuery
JQuery 实现文件下载的常用方法分析
Oct 29 #jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 #jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 #jQuery
You might like
PHP XML备份Mysql数据库
2009/05/27 PHP
php 过滤危险html代码
2009/06/29 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
My Desktop :) 桌面式代码
2008/12/29 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
Angular2 组件通信的实例代码
2017/06/23 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
篝火晚会策划方案
2014/05/16 职场文书
民主评议政风行风整改方案
2014/09/17 职场文书
法定授权委托证明书
2015/06/18 职场文书
环保建议书作文500字
2015/09/14 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python