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获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
基于jquery实现多级菜单效果
Jul 25 jQuery
jQuery实现广告条滚动效果
Aug 22 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 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
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
thinkphp模板赋值与替换实例简述
2014/11/24 PHP
Yii2中如何使用modal弹窗(基本使用)
2016/05/30 PHP
php中文字符串截取多种方法汇总
2016/10/06 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP 验证身份证是否合法的函数
2017/02/09 PHP
理解Javascript_08_函数对象
2010/10/15 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
Node.js的特点和应用场景介绍
2014/11/04 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
jQuery多个版本和其他js库冲突的解决方法
2016/08/11 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
2017/03/27 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
详解Python requests 超时和重试的方法
2018/12/18 Python
Python实现Event回调机制的方法
2019/02/13 Python
基于python历史天气采集的分析
2019/02/14 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
Python中os模块功能与用法详解
2020/02/26 Python
windows python3安装Jupyter Notebooks教程
2020/04/13 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
Python面试题:Python是如何进行内存管理的
2014/08/04 面试题
楼面部长岗位职责范本
2014/02/14 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
外贸英文求职信范文
2015/03/19 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
祝福语集锦:送给毕业同学祝福语
2019/11/21 职场文书