做过web开发的小伙伴对于Cookie一定不陌生,当用户登录后将用户的账号保存到本地,密码保存时,建议使用MD5进行加密,以防止用户个人信息的泄露。今天和大家简单聊聊关于Jquer Cookie的使用,一便我们接下来的开发中使用更方便。好了下面我们开始今天今天的内容:操作Cookie无非是存、取、删,下面就一起简单学一下jQuery Cookie的使用。

  jquery cookie常用操作:

$.cookie('the_cookie'); // 获得cookie
$.cookie('the_cookie', 'the_value'); // 设置cookie
$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等

  相信一些小伙伴已经急不耐了,鼠标右键创建文件夹,导入下载好相应的js文件,打开记事本,编写我们的测试页面,ok,写好了,打开,发现浏览器并没有保存Cookie中的值,然后检查js文件是否引用正确,各种一阵盲测,发现什么也没写错,开始怀疑人生了。上面就是小编做过的蠢事,但是这是为什么呢?首先写的没错,错就错在肯定是在本地测试的,cookie是基于域名来储存的。意思您要把它放到测试服务器上或者本地localhost服务器上才会生效。cookie具有不同域名下储存不可共享的特性。单纯的本地一个html页面打开是无效的。是不是很无奈,那就按照上面的逻辑走一下,创建一个java web,然后把我们的代码拷进去,部署到Tomcat上,通过浏览器测试,问题解决了。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>Cookie测试</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="jquery-1.10.2.min.js" ></script>
<script src="jquery.cookie.js" ></script>
</head> <body>
<input type="text" name="name" id="name" /><br/>
<input type="password" name="password" id="password" /><br/>
<input type="submit" class="submit" value="保存(随浏览器的生命周期)" /> | <input type="submit" class="submit" value="获取" /> | <input type="submit" class="submit" value="保存(设置生命周期)" /> | <input type="submit" class="submit" value="删除1" /> | <input type="submit" class="submit" value="删除2" /> | <input type="submit" class="submit" value="新建一个cookie 包括有效期 路径 域名"/>
<script>
$(".submit").bind("click", function(){
var index = $(this).index();
if(4 == index){
$.cookie("password", $("#password").val());//生命周期:创建到浏览器关闭
}else if(5 == index){
alert($.cookie("password"));//获得Cookie中的值
}else if(6 == index){
$.cookie("password", $("#password").val(), { expires: 7 }); //设置带时间的cookie,当前设置Cookie的生命周期是一周
}else if(7 == index){
$.cookie('password', '', { expires: -1 }); // 删除
}else if(8 == index){
$.cookie('password', null); // 删除 cookie
}else if(9 == index){
$.cookie('password', $("#password").val(), {expires: 7, path: '/', domain: 'http://localhost:8080/', secure: true});//新建一个cookie 包括有效期 路径 域名等
}
});
</script>
</body>
</html>

  最后附上jquery和jquery Cookie的下载地址:jquery(http://jquery.com/download/)、jquery Cookie(http://plugins.jquery.com/cookie/

web开发之Cookie使用的更多相关文章

  1. Web开发之Cookie and Session

    会话 什么是会话? 简单说:用户开一个浏览器,点击多个超链接,访问服务器的多个web资源,然后关闭浏览器,整个过程就称之为一个会话. 会话过程要解决什么问题 每个用户在使用浏览器与服务器进行会话的过程 ...

  2. Vim下的Web开发之html,CSS,javascript插件

    Vim下的Web开发之html,CSS,javascript插件   HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...

  3. Web开发之Tomcat&Servlet

    <!doctype html>01 - JavaEE - Tomcat&Servlet figure:first-child { margin-top: -20px; } #wri ...

  4. 移动web开发之rem适配布局

    移动web开发之rem适配布局 方案: 页面布局文字能否随着屏幕大小变化而变化 流式布局和flex布局主要针对于宽度布局,那高度如何布局? 怎样让屏幕发生变化的时候元素高度和宽度等比例缩放? 1. r ...

  5. .NET Web开发之.NET MVC框架

    摘要:MVC是一种架构设计模式,该模式主要应用于图形化用户界面(GUI)应用程序.那么什么是MVC?MVC由三部分组成:Model(模型).View(视图)及Controller(控制器). MVC概 ...

  6. Python Web开发之Flask

    PythonWEB框架之Flask 前言: Django:1个重武器,包含了web开发中常用的功能.组件的框架:(ORM.Session.Form.Admin.分页.中间件.信号.缓存.ContenT ...

  7. HTML5+JS手机web开发之jQuery Mobile初涉

    一.起始之语 我一直都是在PC上折腾网页的,这会儿怎么风向周边捣鼓起手机网页开发呢?原因是公司原先使用Java开发的产品,耗了不少人力财力,但是最后的效果却不怎么好.因为,Android系统一套东西, ...

  8. Web 开发之 HTTP/2 & SPDY & HTTP 1.1 & HTTP 对比分析详解!

    1 https://zh.wikipedia.org/wiki/HTTP/2 HTTP/2 维基百科,自由的百科全书                         HTTP/2(超文本传输协议第2版 ...

  9. Web开发之response

    Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象. 我们要获取客户机提交过来的数据,只需要找request对象就行 ...

随机推荐

  1. u3d外部资源 打包与加载的问题

    被坑了一下午,调bug,u3d外部加载资源一会可以,一会不行,始终找不到问题,最后快下班的时候,重新试了一下,原来是资源打包之前的文件名,和之后的加载资源名必须一样 [MenuItem("C ...

  2. Mongodb学习笔记(2)--修改器

    修改器 利用原子的更新修改器,可以使得这种部分更新极为高效,更新修改器是一种特殊的键,用来指定复杂的更新操作,比如调整,增加或删除,还可以操作数组或内嵌文档. $inc $inc修改器用来增加已有键的 ...

  3. 基于ThinkPHP的在线编辑器调用

    开源的在线编辑器有很多,比如FCKEditor,UEditor,Kindeditor等,调用方式也都大同小异 下面列举UEditor在线编辑器插件在ThinkPHP里面的应用 1.Ueditor下载地 ...

  4. MBProgressHUD 第三方库使用

    关键操作:   效果如下:   ViewController.h #import <UIKit/UIKit.h> #import "MBProgressHUD.h" @ ...

  5. 【LSTM】Understanding-LSTMs

    http://colah.github.io/posts/2015-08-Understanding-LSTMs/

  6. centos 上安装nodejs v8.0.0

    新建目录www 下载nodejs wget https://npm.taobao.org/mirrors/node/v8.0.0/node-v8.0.0-linux-x64.tar.xz 解压 tar ...

  7. 用FileExplorer查看android手机中的数据库

    想查看一下手机中的通讯录数据库,google之后找到了办法. 参考: http://stackoverflow.com/questions/4867379/android-eclipse-ddms-c ...

  8. python中,如何将两个变量值进行拼接

    说明: 字符串和字符串之间可以拼接,那么变量和变量之间如何进行拼接,在此记录下. 操作过程: 1.通过加号 + 操作符,将两个变量拼接在一起 >>> prefix = 'p' > ...

  9. python使用tkinter写带界面的工具

    python一般用来写纯脚本的居多,但也可以做有视图的产品出来,例如做网页和客户端工具.做成工具的好处是,让不懂代码的人也能使用,不需要去修改代码里面的参数,如果使用次数频繁,甚至比纯脚本跟节约时间: ...

  10. feed流拉取,读扩散,究竟是啥?

    from:https://mp.weixin.qq.com/s?__biz=MjM5ODYxMDA5OQ==&mid=2651961214&idx=1&sn=5e80ad6f2 ...