程序猿的jQuery cookie的使用方法

2016-11-30 1316 0 編輯:網站建設前端伍林 來源:網站程序書籍

Cookies是一種能夠讓網站服務器把少量數據儲存到客戶端的硬盤或內存,或是從客戶端的硬盤讀取數據的一種技術當你瀏覽某網站時,你硬盤上會生產一個非常小的文本文件,它可以記錄你的用戶ID、密碼、瀏覽過的網頁、停留的時間等信息。當你再次來到該網站時,網站通過讀取Cookies,得知你的相關信息,就可以做出相應的動作,如在頁面顯示歡迎你的標語,或者讓你不用輸入ID、密碼就直接登錄等等。從本質上講,它可以看作是你的身份證。

使用傳統的Javascript來設置和獲取Cookies信息很麻煩,要寫上幾個函數來處理,幸運的是jQuery幫我們做了很多事,借助jQuery cookie插件,我們可以輕松的創建、獲取和刪除Cookies。jQuery cookie是個很好的cookie插件,大概的使用方法如下:

寫入cookie

$.cookie("this-cookie","this-value",{

    expires:10,//有效日期

    path:"/",//cookie的路 徑

    domanin:    //cookie的域名

    secure:true //true,cookie的傳輸會要求一個安全協議,否則反之

});

讀取cookie

$.cookie("this-cookie")

刪除cookie

$.cookie("this-cookie",null)

是不是很簡單呢,這樣子就可以完成cookie 下面看一個demo例子。

$(function(){

    $("ul li").click(function(){

        $("#"+this.id).addClass("cur").siblings().removeClass("cur"); //切換選中后的樣式

        $("#colortable").attr("href",this.id+".css");//每次切換更換相對應的樣式表

        $.cookie("cookie",//寫入cookie

            this.id,//需要cookie寫入的業務

            {

            "path":"/", //cookie的默認屬性

            "expires":10 //有效天數

        })

    });

    var cookie=$.cookie("cookie"); //讀取cookie

    if(cookie){

        $("#"+cookie).addClass("cur").siblings().removeClass("cur");

        $("#colortable").attr("href",cookie+".css");

        $.cookie("cookie",cookie,{

            "path":"/",

            "expires":10

        })

    }

})

html:

<li id="colour_1">紅色</li>

<li id="colour_2">黑色</li>

一個簡單的換膚效果就出來了

如果用谷歌瀏覽器打開 記得要在服務器端哦。。

上面這個demo要注意的地方有:

被點擊的盒子。class或者id等 跟對應的樣式表名字一樣。

整理后的代碼:

$(function(){

    $("ul li").click(function(){

        Mycookie(this.id)

        });

    var cookie=$.cookie("cookie"); //讀取cookie

        if(cookie){

            Mycookie(cookie);

        }

    })

    function Mycookie(thiscookie){

        $("#"+thiscookie).addClass("cur").siblings().removeClass("cur");

        $("#colortable").attr("href",thiscookie+".css");

        $.cookie("cookie",thiscookie,{

            "path":"/",

            "expires":10

        })

    }

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾