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+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jQuery+pjax简单示例汇总
Apr 21 jQuery
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery插件jsonview展示json数据
May 26 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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
第六节 访问属性和方法 [6]
2006/10/09 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
jQuery响应enter键的实现思路
2014/04/18 Javascript
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
[05:29]2014DOTA2国际邀请赛 赛后专访:LGDNewbee顺利过关
2014/07/13 DOTA
[16:14]教你分分钟做大人:米拉娜(HEROS)
2014/11/24 DOTA
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
Python3如何判断三角形的类型
2020/04/12 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
大学生求职自我评价
2014/01/16 职场文书
小学生春游活动方案
2014/08/20 职场文书
租赁协议书
2015/01/27 职场文书
体育教师个人工作总结
2015/02/09 职场文书
中秋节主题班会
2015/08/14 职场文书
Python 文字识别
2022/05/11 Python