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解析获取JSON数据
Apr 08 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 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
php抓即时股票信息
2006/10/09 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
动态加载js、css的实例代码
2016/05/26 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
JS实现简单日历特效
2020/01/03 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
详解Python中的各种函数的使用
2015/05/24 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python在cmd上打印彩色文字实现过程详解
2019/08/07 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python 内置函数汇总详解
2019/09/16 Python
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
小学教师寄语大全
2014/04/03 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang