知問前端——cookie插件

時間 2019-12-12

標籤前端 cookie 插件欄目 HTML 简体版

原文原文鏈接

Cookie是網站用來在客戶端保存識別用戶的一種小文件。通常能夠保存用戶登陸信息、購物數據信息等一系列微小信息。javascript

1、使用cookie插件php

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

從官網下載cookie插件——jquery.cookie.js插件。html

1.生成一個cookie，名稱爲user，內容爲liayun：前端

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

2.cookie的參數設置：java

$.cookie("user","liayun", {
    expires:7, //過時時間，7天后過時
    path:"/", //根目錄，path的做用就是設置路徑，根目錄到底所謂何???
});

$.cookie("aaa","bbb", {
    //domain:"www.ycku.com" //設置域名，能夠發現名爲aaa的cookie並無創建，爲什麼???
    secure:true //發送條件：僅限加密鏈接    默認爲false，須要使用安全協議https
});

綜上所述，除了expires這個參數有用，其餘根本就沒什麼鳥用！！！jquery

3.讀取cookie數據：ajax

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數據：cookie

alert($.cookie());

注意：讀取全部的cookie是以對象鍵值對存放的，因此也能夠$.cookie().user獲取cookie數據。

6.刪除cookie：

$.removeCookie("user"); //刪除的通常爲當前目錄

7.刪除指定路徑cookie：

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

2、註冊直接登陸

把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

jQuery改動後部分：

$("#member, #logout").hide();

if ($.cookie("user")) {
    $("#member, #logout").show();
    $("#reg_a, #login_a").hide();
    $("#member").html($.cookie("user"));
} else {
    $("#member, #logout").hide();
    $("#reg_a, #login_a").show();
}

$("#logout").click(function() {
    $.removeCookie("user");
    window.location.href = "/jquery/"; //點擊退出連接，跳到首頁
});

success : function (responseText, statusText) {
    if(responseText) {
        $("#member, #logout").show();
        $("#reg_a, #login_a").hide();
        $("#member").html($.cookie("user"));
    }
}

故，index.js爲：

$(function() {
    $("#search_button").button({
        icons:{
            primary:"ui-icon-search",
        },
    });

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

    $.cookie("user","liayun", {
        expires:7, //過時時間，7天后過時
        path:"/", //根目錄，path的做用就是設置路徑，根目錄到底所謂何???
    });
    */
    /*
    $.cookie("aaa","bbb", {
        //domain:"www.ycku.com" //設置域名，能夠發現名爲aaa的cookie並無創建，爲什麼???
        secure:true //發送條件：僅限加密鏈接    默認爲false，須要使用安全協議https
    });
    */

    //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")); //自動解碼爲：李阿昀

    //$.cookie.raw = true;
    //$.cookie("ddd","李阿昀"); //沒有自動編碼，李阿昀
    //alert($.cookie("ddd")); //李阿昀

    //alert($.cookie().ccc); //[object Object]

    //$.removeCookie("user"); //刪除的通常爲當前目錄
    //$.removeCookie("user", {
    //    path:"/" //刪除根目錄下的cookie
    //});

    $("#member, #logout").hide();

    if ($.cookie("user")) {
        $("#member, #logout").show();
        $("#reg_a, #login_a").hide();
        $("#member").html($.cookie("user"));
    } else {
        $("#member, #logout").hide();
        $("#reg_a, #login_a").show();
    }

    $("#logout").click(function() {
        $.removeCookie("user");
        window.location.href = "/jquery/"; //點擊退出連接，跳到首頁
    });

    $("#loading").dialog({
        autoOpen:false,
        modal:true,
        closeOnEscape:false,
        resizable:false,
        draggable:false,
        width:180,
        //height:80
        height:50
    }).parent().find(".ui-widget-header").hide();

    $("#reg_a").click(function() {
        $("#reg").dialog("open");
    });

    //$("#reg").dailog(...)返回的是jQuery對象，即對話框內容的div(id="reg")對象，因此能夠連綴使用
    $("#reg").dialog({
        autoOpen:false,
        modal:true,
        resizable:false,
        width:320,
        height:340,
        buttons:{
            '提交':function() {
                $(this).submit();
            }
        }
    }).buttonset().validate({
        
        submitHandler:function(form) {
            //alert("驗證成功，準備提交中！");
            $(form).ajaxSubmit({
                url:"add.php",
                type:"post",
                beforeSubmit:function(formData,jqForm,options) {
                    //提交以前，將「數據正在交互中...」對話框打開
                    //打開以後，高度又默認增長了30，因此在初始化dialog時，height應-30，變爲50
                    $("#loading").dialog("open");


                    //alert($("#reg").dialog("widget").html());
                    //alert($("#reg").dialog("widget").find("button").eq(0).html()); //<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">Close</span>
                    //alert($("#reg").dialog("widget").find("button").eq(1).html()); //<span class="ui-button-text">提交</span>
                    $("#reg").dialog("widget").find("button").eq(1).button("disable"); //禁用提交按鈕
                },
                success:function(responseText,statusText) {
                    //alert(responseText); //新增成功，返回1
                    if(responseText) {
                        $("#reg").dialog("widget").find("button").eq(1).button("enable");
                        $("#loading").css("background","url(img/success.gif) no-repeat 20px center").html("數據新增成功...");
                        $.cookie("user", $("#user").val());

                        setTimeout(function() {
                            $("#loading").dialog("close");
                            $("#reg").dialog("close");
                            $("#reg").resetForm(); //重置表單
                            $("#reg span.star").html("*").removeClass("succ");
                            $("#loading").css("background","url(img/loading.gif) no-repeat 20px center").html("數據交互中...");

                            $("#member, #logout").show();
                            $("#reg_a, #login_a").hide();
                            $("#member").html($.cookie("user"));

                        }, 1000);
                    }
                }
            });
        },
        //錯誤提示出現，對話框高度增長，出現滾動條，因此應去除滾動條
        //每次激活錯誤，都會觸發此屬性
        showErrors:function(errorMap, errorList) {
            var errors = this.numberOfInvalids();
            if(errors > 0) {
                $("#reg").dialog("option","height",errors * 20 + 340);
            } else {
                $("#reg").dialog("option","height",340);
            }
            this.defaultShowErrors(); //執行默認錯誤
        },
        //高亮顯示有錯誤的元素，變色式
        highlight:function(element,errorClass) {
            $(element).css("border","1px solid #630");
            $(element).parent().find("span").html("*").removeClass("succ");
        },
        //恢復默認
        unhighlight:function(element,errorClass) {
            $(element).css("border","1px solid #ccc");
            //element即爲<input>控件
            //$(element).parent().find("span").html("ok");
            $(element).parent().find("span").html("&nbsp;").addClass("succ");
        },
        errorLabelContainer:"ol.reg_error",
        wrapper:"li",
        rules:{
            user:{
                required:true,
                minlength:2
            },
            pass:{
                required:true,
                minlength:6
            },
            email:{
                required:true,
                email:true
            },
            date:{
                date:true
            }
        },
        messages:{
            user:{
                required:"帳號不得爲空！",
                minlength:"帳號不得小於{0}位！"
            },
            pass:{
                required:"密碼不得爲空！",
                minlength:"密碼不得小於{0}位！"
            },
            email:{
                required:"郵箱不得爲空！",
                email:"請輸入正確的郵箱地址！"
            }
        }
    });

    $("#date").datepicker({
        changeMonth:true,
        changeYear:true,
        yearSuffix: ' ',
        maxDate:0, 
        yearRange:"1950:2020",
    });

    $("#email").autocomplete({
        delay:0,
        autoFocus:true,
        source:function(request,response) {
            var hosts = ['qq.com','163.com','126.com','sina.com.cn','gmail.com','hotmail.com'],
                term = request.term, //獲取用戶輸入的內容
                name = term, //郵箱的用戶名，如i_beautiful
                host = '', //郵箱的域名，如sina.com.cn
                ix = term.indexOf('@'), //@的位置
                result = []; //最終呈現的郵箱列表

            result.push(term);
            if(ix > -1) {
                name = term.slice(0, ix);
                host = term.slice(ix + 1);
            }
            if(name) {
                var findedHosts = (host ? $.grep(hosts, function(value, index) {
                        return value.indexOf(host) > -1; }) : hosts),
                    findedResult = $.map(findedHosts, function(value, index) {
                        return name + "@" + value; 
                    });
                result = result.concat(findedResult);
            }
            response(result);
        }
    });

});

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。