JQuery_JavaScript___cookie.js操作実践


JQuery____クッキー操作実践
使用方法
1.セッションクッキーを新たに追加:
$.cookie('the_cookie', 'the_value');
注意:クッキーの有効時間が指定されていない場合、作成されたクッキーの有効期間はユーザーがブラウザを閉じるまでデフォルトであるため、
「セッションクッキー」.
2.クッキーを作成し、有効期間を7日間に設定します.
$.cookie('the_cookie', 'the_value', { expires: 7 });
注意:クッキーの有効時間が指定されている場合、作成されたクッキーは「永続クッキー(persistentクッキー)」と呼ばれます. 
3.クッキーを作成し、クッキーの有効なパスを設定します.
$.cookie('the_cookie', 'the_value', { expires: 7, path: '/' });
注意:デフォルトでは、クッキーを設定したWebページのみがクッキーを読み込むことができます.あるページに別のページ設定を読み込むには
セットのクッキーは、クッキーのパスを設定する必要があります.クッキーのパスは、クッキーを読み取ることができるトップディレクトリを設定するために使用されます.これを
つのパスはウェブサイトのルートディレクトリに設定され、すべてのページが互いにクッキーを読み取ることができます(一般的にはこのような設定はしないで、衝突を防止します). 
4.クッキーを読み込む:
$.cookie('the_cookie');//クッキーは存在します=>'the_value'
$.cookie('not_existing');//クッキーは存在しません=>null
5.クッキーを削除し、nullをクッキーの値として渡す.
$.cookie('the_cookie', null);
------------------------関連パラメータの解釈-----------------
1).expires: 365
Cookieの有効時間を定義します.値は数値(Cookieの作成時から1日単位)またはDateペアです.
象.省略すると、作成されたクッキーはセッションクッキーであり、ユーザーがブラウザを終了すると削除されます.
2).path: '/'
デフォルト:クッキーを読み込むには、クッキーを設定したページのみです.
クッキーの有効なパスを定義します.デフォルトでは、このパラメータの値はクッキーを作成するWebページのパス(標準ブラウザの動作)です.
このクッキーにWebサイト全体でアクセスするには、path:'/'という有効なパスを設定する必要があります.定義を削除したい場合は
有効なパスのクッキーは、関数を呼び出すときにこのパスを含む必要があります:$.cookie('the_cookie', null,
{ path: '/' });. domain: 'example.com'
デフォルト:クッキーのWebページが所有するドメイン名を作成します.
3).secure: true
デフォルト:false.trueの場合、クッキーの送信にはセキュリティプロトコル(HTTPS)が必要です.
4).raw: true
デフォルト:false.
デフォルトでは、クッキーの読み取りと書き込み時に自動的に符号化と復号化(encodeURIComponent符号化を使用し、
decodeURIComponentデコード).この機能設定raw:trueを閉じるといいです.
コードdemo
<!DOCTYPE html>
<html>
<head lang="en">

    <meta charset="UTF-8">
    <title>jquery.cookie.js_demo</title>
    <script type="text/javascript" src="public_file/js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="public_file/js/jquery.cookie.js"></script>
</head>
<script>

    //cookie     
    var option_cookie = {expires: 7, path: '/', domain: 'jquery.com', secure: true};

    $(function ($) {

        var userName = COOKIE_UTIL.getCookie("userName");
        var userPswd;
        //          cookie  
        if (userName != null) {
            userPswd = COOKIE_UTIL.getCookie("userPswd");
            $("#userName").val(userName);
            $("#userPswd").val(userPswd);
            $("#isSavaCookie").attr("checked", "checked");
        }

        //        
        $("#login").click(function () {

            userName = $("#userName").val();
            userPswd = $("#userPswd").val();
            var isSavaCookie = $("#isSavaCookie").attr("checked");

            //           cookie,    
            if (isSavaCookie == undefined) {

                COOKIE_UTIL.delCookie("userName");
                COOKIE_UTIL.delCookie("userPswd");
            } else {

                COOKIE_UTIL.savaCookie("userName", userName, option_cookie);
                COOKIE_UTIL.savaCookie("userPswd", userPswd, option_cookie);
            }
            login();
        });


    });

    //    
    function login() {
        //code......
        //alert("login...");
    }

    // cookie     -  -  
    var COOKIE_UTIL = new function () {
        this.savaCookie = function (the_cookie, the_value, option) {
            $.cookie(the_cookie, the_value, option);
        }
        this.getCookie = function (the_cookie) {
            return $.cookie(the_cookie);
        }
        this.delCookie = function (the_cookie) {
            $.cookie(the_cookie, null);
        }
    };
</script>
<body>

<div style="text-align: center">
    <br><br>
    userName:<input type="text" id="userName"><br>
    userPswd:<input type="password" id="userPswd"><br>
    <input type="checkbox" id="isSavaCookie">    <br>
    <input type="button" id="login" value="Login">

</div>
</body>
</html>