做过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. 深度学习 Deep Learning UFLDL 最新Tutorial 学习笔记 5：Softmax Regression

    Softmax Regression Tutorial地址:http://ufldl.stanford.edu/tutorial/supervised/SoftmaxRegression/ 从本节開始 ...

  2. windows使用技巧和工具（后面可能更新linux）

    *:希望广大网友有什么建议或者好的用法工具.也能够在以下评论. 希望这是一个能够让我们更好工作起来的帖子. 工作也能舒适和开心呢. 想着好久没写过博客了吧.今天就写一篇关于windows的使用的吧.我 ...

  3. Spring AOP的日志记录

    现在的项目是Spring+MyBatis,前段时间项目经理让我干了一个活,就是给所有的controller里的所有方法加上日志记录的代码,其实没有多少,也就300来个方法,也没有抱怨什么,一边打着瞌睡 ...

  4. Android开发学习笔记-自定义对话框

    系统默认的对话框只能显示简单的标题内容以及按钮,而如果想要多现实其他内容则就需要自定义对话框,下面是自定义对话框的方法. 1.先定义对话框的模版 <?xml version="1.0& ...

  5. oracle long类型转换成varchar2

    CREATE OR REPLACE FUNCTION LONG_TO_CHAR( in_rowid rowid,in_owner varchar,in_table_name varchar,in_co ...

  6. Sql Server 跨服务器连接

    用openrowset连接远程SQL或插入数据 --如果只是临时访问,可以直接用openrowset --查询示例 select * from openrowset('SQLOLEDB', 'sql服 ...

  7. grid响应式布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 基础SELECT实例

    SELECT查询语句 ---进行单条记录.多条记录.单表.多表.子查询…… SELECT [ALL | DISTINCT | DISTINCTROW ] [HIGH_PRIORITY] [MAX_ST ...

  9. Lottie 动画库

    强大的动画库,且同时支持 android.ios.react native 和 web http://airbnb.io/lottie/

  10. iOS开发--设置UIButton

    1.设置title [btn setTitle: @"search" forState: UIControlStateNormal]; 2.设置字体 //[btn setFont: ...