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获取radio选中的值
May 05 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jquery自定义显示消息数量
Dec 19 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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添加MySQL数据记录代码
2008/06/07 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP 显示客户端IP与服务器IP的代码
2010/10/12 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
PHP实现活动人选抽奖功能
2017/04/19 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
javascript的字符串按引用复制和传递,按值来比较介绍与应用
2012/12/28 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
JavaScript中window、doucment、body的解释
2013/08/14 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
2020/05/08 Javascript
原生js实现购物车
2020/09/23 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python中的exec、eval使用实例
2014/09/23 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
python递归下载文件夹下所有文件
2019/08/31 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
python如何利用Mitmproxy抓包
2020/10/10 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Python在后台自动解压各种压缩文件的实现方法
2020/11/10 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
字中字效果的实现【html5实例】
2016/05/03 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
会计的岗位职责
2014/03/15 职场文书
户外宣传策划方案
2014/05/25 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
特此通知格式
2015/04/27 职场文书
宣传稿格式范文
2015/07/23 职场文书
Python 的演示平台支持 WSGI 接口的应用
2022/04/20 Python