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 校验中国身份证号码实例详解
Apr 11 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
jQuery中过滤器的基本用法示例
Oct 11 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
使用jQuery实现购物车
Oct 29 jQuery
Jquery Fade用法详解
Nov 06 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中所有数据库的方法
2015/03/12 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
javascript白色简洁计算器
2015/05/04 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
浅析vue深复制
2018/01/29 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
2018/04/23 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
Python绘制七段数码管实例代码
2017/12/20 Python
Python操作Excel工作簿的示例代码(\*.xlsx)
2020/03/23 Python
Python reduce函数作用及实例解析
2020/05/08 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
Html5 Canvas 实现一个“刮刮乐”游戏
2019/09/05 HTML / CSS
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
精伦电子Java笔试题
2013/01/16 面试题
竞选文艺委员演讲稿
2014/04/28 职场文书
3的组成教学反思
2014/04/30 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
大连星海广场导游词
2015/02/10 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang