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实现二级联动效果
Mar 30 jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery实现鼠标滑过预览图片大图效果的方法
Apr 26 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
js/jQuery实现全选效果
Jun 17 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
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
使用正则去除php代码中的注释方法
2016/11/03 PHP
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
js变量提升深入理解
2016/09/16 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
python使用正则表达式替换匹配成功的组
2017/11/17 Python
解决Django migrate No changes detected 不能创建表的问题
2018/05/27 Python
python并发和异步编程实例
2018/11/15 Python
对Python信号处理模块signal详解
2019/01/09 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
使用python写的opencv实时监测和解析二维码和条形码
2019/08/14 Python
新手学python应该下哪个版本
2020/06/11 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
Linux操作面试题
2012/05/16 面试题
工程造价专业求职信
2014/07/17 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
2014年银行客户经理工作总结
2014/11/12 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
党员检讨书范文
2014/12/27 职场文书
评先进个人材料
2014/12/29 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
MySQL子查询中order by不生效问题的解决方法
2021/08/02 MySQL
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技