JQuery之cookie增删改查操作

Java Web开发中cookie一般有两种新建方法,一种是在Java中创建维护,另一种是在前端中创建和维护。

二者之间最大的区别就是:Java中的cookie是建立在服务器上面是,通过网络传输给客户端的,如果不能连接服务器就无法把cookie保存在客户端上面。而在前端中一般使用JQuerycookie插件实现的,不需要连接服务器就可以在本地新建cookie,进行cookie的相关操作了。

下面对JQuery中cookie的用法进行详细的讲解:

在使用前要先引入jQuery的库文件,和 jquery.cookie.js 的库文件。 需要注意的是:JQuery必须先行引入,而后才是cookie文件,反正则错误。

现在先看一个例子:

<html>
<head>
<meta charset="UTF-8">
<title>js中字符串处理</title>
</head>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript">

	function newCookieFunc(){
		$.cookie('cookieId',"201211011",{expires:2,path: '/'});
		$.cookie('cookieName',"linzhiqiang",{expires:2,path: '/'});
		alert("新建cookie成功,值分别为:cookieId:201211011  cookieName:linzhiqiang");
	};
	function getCookieFunc(){
		var cookieId=$.cookie('cookieId');
		var cookieName=$.cookie('cookieName');
		alert("cookie的值分别为:cookieId:"+cookieId+"  cookieName:"+cookieName);
	};
	function deleteCookieFunc(){
		$.cookie('cookieId',null,{expires:-1,path: '/'});
		$.cookie('cookieName',null,{expires: -1,path: '/'});
		alert("删除cookie成功");
	};
</script>

<body>
	<input type="button" onclick="newCookieFunc();" value="利用JQuery新建cookie信息"></br>
	<input type="button" onclick="getCookieFunc();" value="利用JQuery读取cookie信息"></br>
	<input type="button" onclick="deleteCookieFunc();" value="利用JQuery删除cookie信息"></br>
</body>
</html>

基本的用法就这些,关于cookie中的参数这里进行稍微的解释一下:

1).expires: 365  定义cookie的有效时间,值可以是一个数字(从创建cookie时算起,以天为单位)或一个Date 对 象。如果省略,那么创建的cookie是会话cookie,将在用户退出浏览器时被删除。  2).path: '/'  默认情况:只有设置cookie的网页才能读取该cookie。 定义cookie的有效路径。默认情况下, 该参数的值为创建 cookie 的网页所在路径(标准浏览器的行为) 。 如果你想在整个网站中访问这个cookie需要这样设置有效路径:path: '/'。如果你想删除一个定义 了有效路径的 cookie,你需要在调用函数时包含这个路径:$.cookie('the_cookie', null, { path: '/' });。 domain: 'example.com' 默认值:创建 cookie的网页所拥有的域名。 

3).secure: true  默认值:false。如果为true,cookie的传输需要使用安全协议(HTTPS)。 

4).raw: true 

默认值:false。 默认情况下,读取和写入 cookie 的时候自动进行编码和解码(使用encodeURIComponent 编码, decodeURIComponent 解码)。要关闭这个功能设置 raw: true 即可。

运行截图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android干货

安卓开发--android library projects cannot be launched错误

34750
来自专栏容器云生态

screen 简单使用

      系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份、ftp 传输等等。通...

27660
来自专栏吴柯的运维笔记

如何用Rysnc实现数据同步?

Rsync(remote sync) 是UNIX及类UNIX平台一款数据镜像备份软件,它不像FTP等其他文件传输服务那样需要进行全备份,Rsync可以根据数据...

431130
来自专栏Web项目聚集地

什么是跨域?解决方案有哪些?

同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同...

1.2K20
来自专栏云计算教程系列

如何从Django应用程序发送Web推送通知

网络不断发展,现在可以实现以前只能在本机移动设备上使用的功能。JavaScript 服务工作者的引入为Web提供了新的功能,可以执行后台同步,脱机缓存和发送推送...

74360
来自专栏BIT泽清

React Native应用部署/马甲包热更新-CodePush最新集成总结(2018年最新)

React Native支持大家用React Native技术开发APP,并打包生成一个APP。在动态更新方面React Native只是提供了动态更新的基础,...

46900
来自专栏向治洪

openfire环境搭建

1、下载源代码:http://www.igniterealtime.org/downloads/source.jsp ? 2、把源代码解压出的openfire_...

24350
来自专栏云计算教程系列

如何使用Prometheus监控CentOS 7服务器

Prometheus是由SoundCloud开发的开源监控系统。与其他监控系统(如InfluxDB和Graphite)一样,Prometheus将其所有数据存储...

1.4K00
来自专栏更流畅、简洁的软件开发方式

如何动态加载js?

第三方的js文件,自己写的js文件,js越来越多了怎么办? 提出问题: 1、js文件太多了,每个页面都写<script src="...">太麻烦。 2、如果路...

42950
来自专栏HTML5学堂

wamp的使用与安装

HTML5学堂:突然发现官网里没有写关于wamp的文章,竟然没有wamp的安装,竟然真的没有wamp(利利碎碎念中),于是乎,来普及一下吧,看看wamp是什么,...

74940

扫码关注云+社区

领取腾讯云代金券