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实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery validata插件实现方法
Jun 25 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
JQuery中queue方法用法示例
Jan 31 jQuery
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery实现日历效果
Sep 11 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 中的面向对象编程:通向大型 PHP 工程的办法
2006/12/03 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
国外十大最流行的PHP框架排名
2013/07/04 PHP
php采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
详解php命令注入攻击
2019/04/06 PHP
两个DIV等高的JS的实现代码
2007/12/23 Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
2010/06/23 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
js实现下一页页码效果
2017/03/07 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python快速查找算法应用实例
2014/09/26 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
python是怎么被发明的
2020/06/15 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
介绍一下linux的文件权限
2014/07/20 面试题
物业管理计划书
2014/01/10 职场文书
优秀共产党员先进事迹材料
2014/05/06 职场文书
高中生毕业评语
2014/12/30 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书