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封装的分页组件
Jun 26 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
jQuery插件DataTables分页开发心得体会
Aug 22 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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
如何让PHP编码更加好看利于阅读
2019/05/12 PHP
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
Bootstrap面板(Panels)的简单实现代码
2017/03/17 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
python生成指定长度的随机数密码
2014/01/23 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
python删除过期文件的方法
2015/05/29 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
神经网络(BP)算法Python实现及应用
2018/04/16 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
Python文件如何引入?详解引入Python文件步骤
2018/12/10 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
python利用pytesseract 实现本地识别图片文字
2020/12/14 Python
详解移动端HTML5音频与视频问题及解决方案
2018/08/22 HTML / CSS
GANT葡萄牙官方商店:拥有美国运动服传统的生活方式品牌
2018/10/18 全球购物
某公司.Net方向面试题
2014/04/24 面试题
学生干部的自我评价分享
2014/01/18 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
实验室的标语
2014/06/20 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
团日活动总结格式
2015/05/11 职场文书
单独二胎证明
2015/06/24 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
javascript对象3个属性特征
2021/11/17 Javascript
Python 绘制多因子柱状图
2022/05/11 Python