做过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. lakala反欺诈建模实际应用代码GBDT监督学习

    /** * Created by lkl on 2018/1/16. */ import org.apache.spark.mllib.evaluation.BinaryClassificationM ...

  2. How to use base class's assignment operator in C++

    看了android下的代码,好长时间没看了,有个关于C++的知识点不是很清楚,查了下: 如何使用基类中的赋值运算符? 引述自http://stackoverflow.com/questions/122 ...

  3. Android学习笔记——保存数据到SQL数据库中(Saving Data in SQL Databases)

    知识点: 1.使用SQL Helper创建数据库 2.数据的增删查改(PRDU:Put.Read.Delete.Update) 背景知识: 上篇文章学习了保存文件,今天学习的是保存数据到SQL数据库中 ...

  4. Node.js 模块之 morgan中间件记录日志

    NodeJs中Express框架使用morgan中间件记录日志 Express中的app.js文件已经默认引入了该中间件var logger = require('morgan'); 使用app.us ...

  5. gcc 高版本兼容低版本 技巧 ：指定 -specs={自定义specs文件} 参数。可以搞定oracle安装问题

    如: #!/bin/sh /usr/bin/gcc-7 -specs=/usr/lib/gcc/x86_64-linux-gnu/jin.spec $* 该技巧很实用.这么久才发现,唉,不是专业搞某个 ...

  6. Nginx 向客户端输出真实的后端IP地址

    因为涉及到内外网的改造,所以狠多东西现在需要依赖于openresty来做总控实现.然后就碰见了一个比较难办的问题,即在upstream时候,如何获取实际处理请求的server地址.假设有如下upstr ...

  7. 源码分析八(org.springframework.util包之StringUtils类))

    一:spring框架util包中的StringUtils类主要是处理关于字符串 的功能方法,下面直接结合代码分析: //判断字符串是否为空,如果为nul或者""则返回true,否则 ...

  8. 双调旅行商问题 (Bitonic TSP)

    问题描写叙述: 上述问题能够使用动态规划的方法来解决. 以下是解决思路的详细介绍: 1. 最优子结构: 如果d[i][j]表示从起点1出发到达i及j两个顶点的最短路程之和. 为此能够如果K为此段路程上 ...

  9. 【RF库XML测试】parse xml

    Name:Parse XmlSource:XML <test library>Arguments:[ source | keep_clark_notation=False ]Parses ...

  10. pip导出安装包及批量安装

    python导出安装包及版本 pip freeze > requirements.txt 批量安装pip install -r requirements.txt