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 EasyUI 组件加上清除功能的方法(详解)
Apr 13 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
jQuery length 和 size()区别总结
Apr 26 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
学习jQuery中的noConflict()用法
Sep 28 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
JQuery常见节点操作实例分析
May 15 jQuery
Jquery动态列功能完整实例
Aug 30 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
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP中ltrim与rtrim去除左右空格及特殊字符实例
2016/01/07 PHP
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
javascript事件模型介绍
2016/05/31 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
纯html+css+javascript实现楼层跳跃式的页面布局(实例代码)
2017/10/25 Javascript
小程序实现点击tab切换左右滑动
2020/11/16 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python字典的核心底层原理讲解
2019/01/24 Python
Python os.access()用法实例
2019/02/18 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
Pyinstaller打包.py生成.exe的方法和报错总结
2019/04/02 Python
python实现的分析并统计nginx日志数据功能示例
2019/12/21 Python
python 实现单例模式的5种方法
2020/09/23 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
CSS3的resize属性使用初探
2015/09/27 HTML / CSS
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
会计主管岗位职责范文
2013/11/08 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
2015年班组工作总结
2015/04/20 职场文书
信访维稳承诺书
2015/05/04 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
Android开发之底部导航栏的快速实现
2022/04/28 Java/Android
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技