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加密密码到cookie的实现代码
Apr 18 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
jQuery实现图片下载代码
Jul 18 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 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
?繁体转换的class
2006/10/09 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
php 购物车完整实现代码
2014/06/05 PHP
PHP中round()函数对浮点数进行四舍五入的方法
2014/11/19 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
js使用eval解析json实例与注意事项分享
2014/01/18 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
Jquery获取当前城市的天气信息
2016/08/05 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
Vue 使用中的小技巧
2018/04/26 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
使用Python实现牛顿法求极值
2020/02/10 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
台湾专柜女包:KINAZ
2019/12/26 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
毕业生教师求职信
2013/10/20 职场文书
护士自我鉴定
2013/10/23 职场文书
国际贸易系求职信
2014/08/09 职场文书
杜甫草堂导游词
2015/02/03 职场文书
见习期个人总结
2015/03/05 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记