JS設置cookie

本文轉載自查看原文 2014-07-01 16:05 13263 Jquery學習

cookie 與 session 是網頁開發中常用的信息存儲方式。Cookie是在客戶端開辟的一塊可存儲用戶信息的地方；Session是在服務器內存中開辟的一塊存儲用戶信息的地方.

JavaScript是運行在客戶端的腳本，因此一般是不能夠設置Session的，因為Session是運行在服務器端的。

而cookie是運行在客戶端的，所以可以用JS來設置cookie.

首先需要稍微了解一下cookie的結構，簡單地說：cookie是以鍵值對的形式保存的，即key=value的格式。各個cookie之間一般是以“;”分隔。

JS設置cookie:

假設在A頁面中要保存變量username的值("jack")到cookie中,key值為name，則相應的JS代碼為：

document.cookie="name="+username;

JS讀取cookie:

假設cookie中存儲的內容為：name=jack;password=123

則在B頁面中獲取變量username的值的JS代碼如下：

var username=document.cookie.split(";")[0].split("=")[1];

//JS操作cookies方法!

//寫cookies

function setCookie(name,value)
{
    var Days = 30;
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();


    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec*1);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//讀取cookies
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

    if(arr=document.cookie.match(reg))

        return (arr[2]);
    else
        return null;
}

//刪除cookies
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
        document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));

//如果需要設定自定義過期時間
//那么把上面的setCookie　函數換成下面兩個函數就ok;

//程序代碼
function setCookie(name,value,time)
{
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec*1);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

function getsec(str)
{
   alert(str);
   var str1=str.substring(1,str.length)*1;
   var str2=str.substring(0,1);
   if (str2=="s")
   {
        return str1*1000;
   }
   else if (str2=="h")
   {
       return str1*60*60*1000;
   }
   else if (str2=="d")
   {
       return str1*24*60*60*1000;
   }
}
//這是有設定過期時間的使用示例：
//s20是代表20秒
//h是指小時，如12小時則是：h12
//d是天數，30天則：d30

setCookie("name","hayden","s20");

實例一：

<! DOCTYPE HTML >
< html >
< head >
< title > follow mouse < / title>
< meta name = " Author " content = " hongru.chen " >

< style type = " text/css " >

< / style>

< / head>

< body >

</div> </div>

< / body>
< / html>

上面的例子是當彈窗的廣告圖點擊關閉之后，cookie會記錄到，然后一天之內再返回到這個頁面的時候，這個彈窗就不會彈出來了，這個效果保證用戶不用每次刷新頁面的時候都要彈一次，這樣用戶體驗也是非常好一點！

實例二：

<! DOCTYPE HTML >
< html >
< head >
< title > follow mouse < / title>
< meta name = " Author " content = " hongru.chen " >
< style type = " text/css " >
< / style>
< / head>

< body >

<div class="favorite_index" style="height: 32px;width: 100%; position: relative; z-index: 1; display: none;">
<div class="wrapper">
<p class="clearfix" style="text-align:center;position:relative;border-top:1px solid #f0de96;border-bottom:1px solid #f0de96;background-color:#ffffe4;height:30px;">
<span style="display:block;float:left;padding:8px 0 0 500px;">按<span style="color:#ed1c24;">Ctrl + D</span>，把包包樹批發網<a href="javascript:;" class="favorite_btn" style="color:#ed1c24; font-weight: bold; padding: 0pt 5px;">放入收藏夾</a>，以便下次訪問更方便！</span><a href="javascript:;" class="never_close_btn" style="display: block; float: left; padding: 8px 0pt 0pt 10px; text-decoration: underline;"><span style="color:#f60;">不再提示</span></a><a href="javascript:void(0)" class="close_btn" style="display: block; float: left; position: absolute; top: 8px; right: 8px;"><img src="images/spire_fa.gif" alt="關閉"></a>
</p>
</div>
</div>

/* 收藏提示 */

//關閉
$('.close_btn').click(function(){
$('.favorite_index').css('display' , 'none');
});

//收藏
$('.favorite_btn').click(function(){
var sTitle = document.title;
var sURL = location.href;

try
{
window.external.AddFavorite(sURL, sTitle);
}
catch(e)
{
try
{
window.sidebar.addPanel(sTitle, sURL, "");
}
catch (e)
{
alert("加入收藏失敗，請使用Ctrl+D進行添加");
}
}

});

//不在提示
$('.never_close_btn').click(function(){
var date = new Date();
date.setTime(date.getTime() + 7*24*3600*1000);
document.cookie = "bagtree_index_favorite=close;expires=" + date.toGMTString() + " ;path=/";
$('.favorite_index').css('display' , 'none');
});

//顯示
var _cookie = document.cookie;
if( !(_cookie.indexOf('bagtree_index_favorite') > 0) )
{
$('.favorite_index').css('display' , 'block');
}

/* 收藏提示結束 */

});

</script>

< / body>
< / html>

上面實例說明當用戶點擊不在提示按鈕時候，cookie會記錄到，當再刷新頁面的時候，這個內容就不再彈出了，直到一周之后這個才能彈出這個框，這個只要是敘述COOKIE的一些記錄設置的問題；

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JS設置cookie，刪除cookie JS設置cookie，刪除cookie JS設置cookie、讀取cookie、刪除cookie JS設置cookie、讀取cookie、刪除cookie JS設置cookie、讀取cookie、刪除cookie JS設置cookie、讀取cookie、刪除cookie js設置cookie、讀取cookie、刪除cookie js設置cookie(原生js) js設置、獲取單值cookie和多值cookie JS設置Cookie過期時間