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 条评论
登录 后参与评论

相关文章

来自专栏假装我会写代码

highlight.js 在 Vue 中使用的一点儿经验

1462
来自专栏weixuqin 的专栏

sublime下让代码居中

34613
来自专栏Youngxj

[源码分享]Emlog博客后台自适应主题 N+

4034
来自专栏代码GG之家

android这些UI库,再不看你就OUT了

项目地址: https://github.com/luxiaoming/awesome-android-ui 本文推荐一些常用的UI库,...

2425
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:获取或存储图像路径设置

获取或设置图像存储路径,默认设置为“image”,表示的ResourcePath是在程序运行路径下的Image文件夹(bin\Debug\Image);

822
来自专栏Ryan Miao

webstom设置和monokia配色方案

首先,最后配色结果如下: ? 本次配色参考几个文档: http://frontenddev.org/article/webstorm-portal-1-subj...

36612
来自专栏源码之家

word批量删除链接的方法

1564
来自专栏yukong的小专栏

【ssm个人博客项目实战03】左侧导航菜单功能实现

由于每一个菜单选项单击一下都会打开一个tab 所以我们可以把这个抽出来作为一个方法

755
来自专栏青枫的专栏

粘贴到vi/vim的代码,怎样避免向右不断缩进,保持原来的格式?解决vi/vim在粘贴中会在行首多很多缩进和空格的问题。

SecureCRT会将你原来的文本原封不动的按照字符串的样式发送给服务器。所以当你的服务器上的vi/vim设置为autoindent的话,在 i 模式下,那么它...

1202
来自专栏无原型不设计

【Mockplus教程】添加

1. 拖动添加 用鼠标从左侧组件面板中拖动一个组件到工作区,即可完成组件的添加。 2. 搜索添加 在上方组件搜索框中输入想要添加的组件名字,在自动弹出来...

3238

扫码关注云+社区