Jquery cookie插件实现原理代码解析


Posted in jQuery onAugust 04, 2020

Cookie 是由 Web 服务器保存在用户浏览器上的小文本文件,它包含有关用户的本地终端上的数据。

jQuery提供了一个十分简单的插件(名称也是Cookie)来管理网站的Cookie。

下载地址:http://github.com/carhartl/jquery-cookie

例子: 当在用户名字段填写用户名后,单击下面的“记住用户名”复选框后,再次打开这个页面,发现用户名字段上已经被自动赋值(之前所填写的用户名)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
  	var COOKIE_NAME = 'username';
  	if( $.cookie(COOKIE_NAME) ){
  		$("#username").val( $.cookie(COOKIE_NAME) );
  	}
  	$("#check").click(function(){
  		if(this.checked){
  			$.cookie(COOKIE_NAME, $("#username").val() , { path: '/', expires: 10 });
  		}else{
  			$.cookie(COOKIE_NAME, null, { path: '/' });
  		}
  	});
  
  });

</script>
</head>
<body>
  用户名:<input type="text" name="username" id="username" /> <br/>
  <input type="checkbox" name="check" id="check"/>记住用户名
</body>
</html>

Jquery cookie插件实现原理代码解析

调试:

使用chrome调试,发现无法实现效果

尝试获取cookie文件也失效

Jquery cookie插件实现原理代码解析

原因:

chrome不支持js在本地操作cookie。据测试,除了chrome浏览器外,其他主流浏览器(ie、firefox等)都支持js在本地操作cookie。当然部署到服务器上所有浏览器都是支持的。

扩展:

操作cookie失效还有一个原因:浏览器设置成不支持Cookie。

可以通过以下代码测试浏览器是否支持Cookie或者Cookie是否被禁用?

var dt = new Date(); 
dt.setSeconds(dt.getSeconds() + 60); 
document.cookie = "cookietest=1; expires=" + dt.toGMTString(); 
var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1; 
if(!cookiesEnabled) { 
	//没有启用cookie 
	alert("没有启用cookie ");
} else{
	//已经启用cookie 
	alert("已经启用cookie ");
}

经测试,chrome的确没有启用Cookie,因此上述例子达不到效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
Jquery-data的三种用法
Apr 18 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery表单设置值的方法
Jun 30 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery中库的引用方法
Jan 06 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
一文快速了解JQuery中的AJAX
May 31 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery treeview树形结构应用
Mar 24 jQuery
jQuery实现雪花飘落效果
Aug 02 #jQuery
jQuery实现滑动开关效果
Aug 02 #jQuery
jQuery实现开关灯效果
Aug 02 #jQuery
jquery轮播图插件使用方法详解
Jul 31 #jQuery
jQuery带控制按钮轮播图插件
Jul 31 #jQuery
jquery实现简单自动轮播图效果
Jul 29 #jQuery
jQuery+ThinkPHP实现图片上传
Jul 23 #jQuery
You might like
一个简单计数器的源代码
2006/10/09 PHP
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
angularJS开发注意事项
2018/05/26 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Django实现文件上传下载
2019/10/06 Python
Python高级property属性用法实例分析
2019/11/19 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python 对xml解析的示例
2021/02/27 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
三年级音乐教学反思
2014/01/28 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
介绍信模板
2015/01/31 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
话题作文之成长
2019/12/09 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
bose降噪耳机音能消除人声吗
2022/04/19 数码科技