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遍历节点方法汇总(推荐)
May 13 jQuery
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
基于jquery实现五星好评
Nov 18 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery+CSS实现的标签页效果示例【测试可用】
Aug 14 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 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
10个实用的PHP代码片段
2011/09/02 PHP
php使用curl访问https示例分享
2014/01/17 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
php cookie工作原理与实例详解
2016/07/18 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
(function(){})()的用法与优点
2007/03/11 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
jquery 3D 标签云示例代码
2014/06/12 Javascript
NodeJS学习笔记之Http模块
2015/01/13 NodeJs
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
XMLHttpRequest Level 2 使用指南
2016/08/26 Javascript
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
jQuery 实现左右两侧菜单添加、移除功能
2018/01/02 jQuery
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
js实现图片局部放大效果详解
2019/03/18 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
python实现canny边缘检测
2020/09/14 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
python推导式的使用方法实例
2021/02/28 Python
京东国际站:JOYBUY
2017/11/23 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
德国消费电子产品购物网站:Guter Kauf
2020/09/15 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
个人向公司借款协议书
2014/10/09 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
Golang 编译成DLL文件的操作
2021/05/06 Golang
Win10系统下配置Java环境变量
2021/06/13 Java/Android