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实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery模拟12306城市选择框功能简单实现方法示例
Aug 13 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 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 模板高级篇总结
2006/12/21 PHP
php时间不正确的解决方法
2008/04/09 PHP
10条PHP高级技巧[修正版]
2011/08/02 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP使用xmllint命令处理xml与html的方法
2014/12/15 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
javascript中call和apply方法浅谈
2013/09/27 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
vue树形结构获取键值的方法示例
2018/06/21 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
2018/09/30 Javascript
vue项目首屏打开速度慢的解决方法
2019/03/31 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
Python 迭代器工具包【推荐】
2016/05/06 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
Numpy中ndim、shape、dtype、astype的用法详解
2020/06/14 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
车间班长岗位职责
2013/11/30 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android