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日程管理控件glDatePicker用法详解
Mar 29 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery zTree插件使用简单教程
Aug 16 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jquery实现简单自动轮播图效果
Jul 29 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使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
2014/02/12 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
基于Css3和JQuery实现打字机效果
2015/08/11 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
Vue源码解读之Component组件注册的实现
2018/08/24 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
JavaScript枚举选择jquery插件代码实例
2020/11/17 jQuery
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python实现图片转字符画的示例代码
2017/08/21 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
python3爬虫中异步协程的用法
2020/07/10 Python
python中remove函数的踩坑记录
2021/01/04 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
广告学专业毕业生自荐信
2013/09/24 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
单位工程竣工验收方案
2014/03/16 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书