知问前端——cookie插件

Cookie是网站用来在客户端保存识别用户的一种小文件。一般可以保存用户登录信息、购物数据信息等一系列微小信息。

一、使用cookie插件

官方网站：http://plugins.jquery.com/cookie/

从官网下载cookie插件——jquery.cookie.js插件。

1.生成一个cookie，名称为user，内容为liayun：

$.cookie("user","liayun");

2.cookie的参数设置：

$.cookie("user","liayun", {
    expires:7, //过期时间，7天后过期
    path:"/", //根目录，path的作用就是设置路径，根目录到底所谓何???
});

$.cookie("aaa","bbb", {
    //domain:"www.ycku.com" //设置域名，可以发现名为aaa的cookie并没有建立，为何???
    secure:true //发送条件：仅限加密连接    默认为false，需要使用安全协议https
});

综上所述，除了expires这个参数有用，其他根本就没什么鸟用！！！

3.读取cookie数据：

alert($.cookie("user")); //liayun
alert($.cookie("aaa")); //undefined，名为aaa的cookie的参数secure为true，因为需要使用安全协议https，而我们一般使用http协议，所以返回undefined

$.cookie("ccc","李阿昀"); //自动编码为：%E6%9D%8E%E9%98%BF%E6%98%80
alert($.cookie("ccc")); //自动解码为：李阿昀

4.关闭编码/解码，默认为false：

$.cookie.raw = true;
$.cookie("ddd","李阿昀"); //没有自动编码，李阿昀
alert($.cookie("ddd")); //李阿昀

5.读取所有cookie数据：

alert($.cookie());

注意：读取所有的cookie是以对象键值对存放的，所以也可以$.cookie().user获取cookie数据。

6.删除cookie：

$.removeCookie("user"); //删除的一般为当前目录

7.删除指定路径cookie：

$.removeCookie("user", {
    path:"/" //删除根目录下的cookie
});

二、注册直接登录

把cookie引入到知问前端中去。

html改动后部分：

<div class="header_member">
    <a href="javascript:void(0)" id="reg_a">注册</a>
    <a href="javascript:void(0)" id="member">用户</a>
    | 
    <a href="javascript:void(0)" id="login_a">登录</a>
    <a href="javascript:void(0)" id="logout">退出</a>
</div>

javascript:void(0)的作用，就是用户点击链接之后，地址栏中地址后面没有一些###等奇怪的东东。

所以，index.html为：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知问前端</title>
    <script type="text/javascript" src="jquery-1.12.3.js"></script>
    <script type="text/javascript" src="jquery-ui.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="jquery.form.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <div id="header">
        <div class="header_main">
            <h1>知问</h1>
            <div class="header_search">
                <input type="text" name="search" class="search" />
            </div>
            <div class="header_button">
                <button id="search_button">查询</button>
            </div>
            <div class="header_member">
                <a href="javascript:void(0)" id="reg_a">注册</a>
                <a href="javascript:void(0)" id="member">用户</a>
                | 
                <a href="javascript:void(0)" id="login_a">登录</a>
                <a href="javascript:void(0)" id="logout">退出</a>
            </div>
        </div>
    </div>
    
    <form id="reg" action="123.html" title="会员注册">
        <ol class="reg_error"></ol>
        <p>
            <label for="user">账号：</label>
            <input type="text" name="user" class="text" id="user"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="pass">密码：</label>
            <input type="password" name="pass" class="text" id="pass"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label for="email">邮箱：</label>
            <input type="text" name="email" class="text" id="email"></input>
            <span class="star">*</span>
        </p>
        <p>
            <label>性别：</label>
            <input type="radio" name="sex" id="male" value="male" checked="checked"><label for="male">男</label></input>
            <input type="radio" name="sex" id="female" value="female"><label for="female">女</label></input>
        </p>
        <p>
            <label for="date">生日：</label>
            <input type="text" name="birthday" readonly="readonly" class="text" id="date"></input>
        </p>
    </form>
    <div id="loading">数据交互中...</div>
</body>
</html>

View Code