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插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery实现获取当前鼠标位置并输出功能示例
Jan 05 jQuery
jquery.pager.js实现分页效果
Jul 29 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jquery实现拖拽添加元素功能
Dec 01 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多维数组转一维数组的简单实现方法
2015/12/23 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
Jquery使用css方法改变样式实例
2015/05/18 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
2016/06/24 Javascript
JS表格组件神器bootstrap table使用指南详解
2017/04/12 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
python中__slots__用法实例
2015/06/04 Python
Python实现读取文件最后n行的方法
2017/02/23 Python
Python2.7基于淘宝接口获取IP地址所在地理位置的方法【测试可用】
2017/06/07 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
python面试题之列表声明实例分析
2019/07/08 Python
大学生预备党员自我评价分享
2013/11/16 职场文书
策划总监岗位职责
2014/02/16 职场文书
改作风抓落实促发展心得体会
2014/09/10 职场文书
综合素质自我评价评语
2015/03/06 职场文书
感恩教师主题班会
2015/08/12 职场文书
初中语文教学研修日志
2015/11/13 职场文书
区域销售大会开幕词
2016/03/04 职场文书