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 相关文章推荐
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
jquery插件实现代码雨特效
Apr 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
PHP SEO优化之URL优化方法
2011/04/21 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
ThinkPHP验证码使用简明教程
2014/03/05 PHP
xml转json的js代码
2012/08/28 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
JS中数据结构之栈
2019/01/01 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
[03:23:49]2016.12.17日完美“圣”典全回顾
2016/12/19 DOTA
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
Python多继承原理与用法示例
2018/08/23 Python
python实现抖音点赞功能
2019/04/07 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python列表(list)所有元素的同一操作解析
2019/08/01 Python
用django设置session过期时间的方法解析
2019/08/05 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
pytorch GAN生成对抗网络实例
2020/01/10 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
令人印象深刻的自荐信
2014/05/25 职场文书
新教师个人工作总结
2015/02/06 职场文书
2015年推广普通话演讲稿
2015/03/20 职场文书
交通处罚决定书
2015/06/24 职场文书