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自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
使用jQuery实现简单的tab框实例
Aug 22 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 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
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
PHP常用字符串操作函数实例总结(trim、nl2br、addcslashes、uudecode、md5等)
2016/01/09 PHP
PHP  Yii清理缓存的实现方法
2016/11/10 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
基于jquery的鼠标拖动效果代码
2012/05/30 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
前端构建工具之gulp的语法教程
2017/06/12 Javascript
不得不看之JavaScript构造函数及new运算符
2017/08/21 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
python列表的常用操作方法小结
2016/05/21 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
python字典快速保存于读取的方法
2018/03/23 Python
python批量赋值操作实例
2018/10/22 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
python爬虫---requests库的用法详解
2020/09/28 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
教师业务学习制度
2014/01/25 职场文书
党员一句话承诺大全
2014/03/28 职场文书
大学生活自我评价
2014/04/09 职场文书
写给领导的感谢信
2015/01/22 职场文书
Mysql数据库索引面试题(程序员基础技能)
2021/05/31 MySQL
html5调用摄像头截图功能
2022/01/18 Javascript
TS 类型兼容教程示例详解
2022/09/23 Javascript