web开发之Cookie使用

  做过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/

posted @ 2017-03-25 15:23  小破孩123  阅读(1399)  评论(0编辑  收藏  举报