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 replace方法去空格
May 08 jQuery
jQuery异步提交表单实例
May 30 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
Oct 13 jQuery
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
jQuery实现飞机大战小游戏
Jul 05 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
Session保存到数据库的php类分享
2011/10/24 PHP
PHP 杂谈《重构-改善既有代码的设计》之五 简化函数调用
2012/05/07 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
用js判断浏览器是否是IE的比较好的办法
2007/05/08 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
js 走马灯简单实例
2013/11/21 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
python 实现堆排序算法代码
2012/06/05 Python
实现python版本的按任意键继续/退出
2016/09/26 Python
Python中asyncio与aiohttp入门教程
2018/10/16 Python
python解析多层json操作示例
2019/12/30 Python
Python3实现飞机大战游戏
2020/04/24 Python
Python计算信息熵实例
2020/06/18 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
残疾人创业典型事迹
2014/02/01 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
自我工作评价范文
2015/03/06 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
暑假生活随笔
2015/08/15 职场文书
python字符串常规操作大全
2021/05/02 Python
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
一文弄懂MySQL索引创建原则
2022/02/28 MySQL