js設置cookie(原生js)

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

JavaScript是運行在客戶端的腳本,所以通常是不可以設置Session的,由於Session是運行在服務器端的。

而cookie是運行在客戶端的,因此能夠用JS來設置cookie.

假設有這樣一種狀況,在某個用例流程中,由A頁面跳至B頁面,若在A頁面中採用JS用變量temp保存了某一變量的值,在B頁面的時候,一樣須要使用JS 來引用temp的變量值,對於JS中的全局變量或者靜態變量的生命週期是有限的,當發生頁面跳轉或者頁面關閉的時候,這些變量的值會從新載入,即沒有達到 保存的效果。解決這個問題的最好的方案是採用cookie來保存該變量的值,那麼如何來設置和讀取cookie呢?

首先須要稍微瞭解一下cookie的結構,簡單地說:cookie是以鍵值對的形式保存的,即key=value的格式。各個cookie之間通常是以「;」分隔。

JS設置cookie:
 jquery


假設在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");//在谷歌瀏覽器中須要在服務器中才能響應
將cookie值存到響應域名中的方法以下:
<script>
String.prototype.trim = function(){ return Trim(this);};
function LTrim(str)
{
 
   var i;
    for(i=0;i<str.length;i++)
    {
        if(str.charAt(i)!=" "&&str.charAt(i)!=" ")break;
    }
    str=str.substring(i,str.length);
    return str;
}
function RTrim(str)
{
    var i;
    for(i=str.length-1;i>=0;i--)
    {
        if(str.charAt(i)!=" "&&str.charAt(i)!=" ")break;
    }
    str=str.substring(0,i+1);
    return str;
}
function Trim(str)
{
    return LTrim(RTrim(str));
}
function cookie(name, value, options) {
    if (typeof value != 'undefined') { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString();
        }
        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = (cookies[i]).trim();
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};
window.onload = function(){
     cookie('ddd','12345666666',{expires: 7, path: '/', domain: 'jquery.com', secure: true});
     alert(cookie('ddd'));
}
</script>
第三種包括刪除cookie:
var config = $.cookie = function(key, value, options) {

        // Write
        if (value !== undefined && !$.isFunction(value)) {
            options = $.extend({}, config.defaults, options);

            if (typeof options.expires === 'number') {
                var days = options.expires,
                    t = options.expires = new Date();
                t.setDate(t.getDate() + days);
            }

            return (document.cookie = [
                encode(key), '=', stringifyCookieValue(value),
                options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
                options.path ? '; path=' + options.path : '',
                options.domain ? '; domain=' + options.domain : '',
                options.secure ? '; secure' : ''
            ].join(''));
        }

        // Read

        var result = key ? undefined : {};

        // To prevent the for loop in the first place assign an empty array
        // in case there are no cookies at all. Also prevents odd result when
        // calling $.cookie().
        var cookies = document.cookie ? document.cookie.split('; ') : [];

        for (var i = 0, l = cookies.length; i < l; i++) {
            var parts = cookies[i].split('=');
            var name = decode(parts.shift());
            var cookie = parts.join('=');

            if (key && key === name) {
                // If second argument (value) is a function it's a converter...
                result = read(cookie, value);
                break;
            }

            // Prevent storing a cookie that we couldn't decode.
            if (!key && (cookie = read(cookie)) !== undefined) {
                result[name] = cookie;
            }
        }

        return result;
    };

    config.defaults = {};

    $.removeCookie = function(key, options) {
        if ($.cookie(key) !== undefined) {
            // Must not alter options, thus extending a fresh object...
            $.cookie(key, '', $.extend({}, options, {
                expires: -1
            }));
            return true;
        }
        return false;
    };
 
使用方法:
$.cookie('app_usertype', d.data.type);
$.removeCookie('app_usertype');
$.removeCookie('app_usertype', {
                path: '/'
 });
相關文章
相關標籤/搜索