Cookie插件的使用

時間 2019-12-09

標籤 cookie 插件使用欄目 HTML 简体版

原文原文鏈接

jQuery-cookie插件的使用

什麼是插件？javascript

基於jQuery的語法，按照必定規範書寫，具備特定功能的腳本文件，稱爲插件。css

插件除了js文件以外，有的還包含css文件，圖片和字體等資源文件。java

在jQuery的官網https://jquery.com/搜索和下載須要的插件。jquery

1.引入cookie插件

    <head>
        <meta charset="utf-8">
        <title>cookie插件的使用</title>
        <!-- 首先引入jQuery -->
        <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
        <!-- 插件基於jQuery，而後再引入下載的cookie插件 -->
        <script src="../js/cookie/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    </head>

cookie是什麼？web

cookie就是瀏覽器存儲在用戶電腦上的一小段文本文件。一個web頁面或服務器會告知瀏覽器按照必定規範來存儲這些信息，並在以後的請求中將這些信息發送至服務器。web服務器就能夠使用這些信息來識別不一樣的用戶。例如，訪問一個網站輸入帳號密碼，如保存密碼則在cookie的有效期內再次訪問網站時不會再輸入帳號密碼。瀏覽器

2.建立cookie

在jQuery的官網，下載插件的頁面都會有相應的使用文檔。服務器

        <script type="text/javascript">
            function doAdd(){
                //cookie的名字的屬性
                $.cookie("username",$("#userName").val());//未指定過時時間，則會在關閉瀏覽器或過時。
                $.cookie("password",$("#passWord").val(),{expires:7});//指定有效期,7表明的是7天
            
            }
        </script>

設置輸入框和按鈕框並綁定。cookie

    <body>
        用戶名:<input type="text" name="" id="userName" value="" />
        密碼:<input type="password" name="" id="passWord" value="" />
        <hr >
        <input type="button" name="" id="" value="添加cookie" onclick="doAdd()" />
    </body>

當在input中輸入用戶名密碼後點擊按鈕調用doAdd函數函數

3.讀取cookie

            //讀取cookie
            function doRead(){
                //讀取指定名字的cookies
                console.log($.cookie("username"));//直接調用cookie方法獲取名字
            }

讀取全部cokkie,須要使用each()方法遍歷字體

        <script type="text/javascript">
            function doAdd(){
                //cookie的名字的屬性
                $.cookie("username",$("#userName").val());//未指定過時時間，則會在關閉瀏覽器或過時。
                $.cookie("password",$("#passWord").val(),{expires:7});//指定有效期,7表明的是7天
            
            }
            //讀取cookie
            function doRead(){
                //讀取全部cookie
                var cookies = $.cookie();
                $.each(cookies,function(key,value){
                    console.log(key+ "=" +value);
                });
            }
        </script>

設置按鈕並綁定

        <input type="button" name="" id="" value="讀取cookie" onclick="doRead()"/>

在控制檯輸出

4.刪除cookie

和讀取相似

        <script type="text/javascript">
            //刪除
            function removeDel(){
                $.removeCookie("username");
            }
        </script>

調用方法獲取到想要刪除的cookie名字

設置按鈕並綁定

        <input type="button" name="" id="" value="刪除cookie" onclick="removeDel()"/>

這裏刪除了username

相關標籤/搜索