javascript實(shí)現(xiàn)基于cookie的存儲類實(shí)例

字號:


    具體分析如下:
    通過這個js類,你可以象使用session一樣使用cookie,非常簡單了!
    /*
    * cookiestorage.js
    * 本類實(shí)現(xiàn)像localstorage和sessionstorage一樣的存儲api
    * 不同的是,它是基于http cookies實(shí)現(xiàn)的.
    */
    function cookiestorage(maxage, path) {
    // 兩個參數(shù)分別代表儲存有效期和作用域
    // 獲取一個儲存全部cookies的對象
    var cookies = (function() {
    // 類型之前介紹的getcookies函數(shù)
    var cookies = {};
    // 該對象最終會返回
    var all = document.cookie;
    // 以大字符串的形式獲取所有cookies的信息
    if (all === )
    // 如果該屬性為空白符
    return cookies;
    // 返回一個空對象
    var list = all.split(; );
    // 分離出名/值對
    for(var i = 0; i < list.length; i++) {
    // 遍歷每個cookie
    var cookie = list[i];
    var p = cookie.indexof(=);
    // 找到第一個“=”符號
    var name = cookie.substring(0,p);
    // 獲取cookie的名字
    var value = cookie.substring(p+1);
    // 獲取cookie對應(yīng)的值
    value = decodeuricomponent(value);
    // 對其值進(jìn)行解碼
    cookies[name] = value;
    // 將名值對存儲到對象中
    }
    return cookies;
    }());
    // 將所有cookie的名字存儲到一個數(shù)組中
    var keys = [];
    for(var key in cookies) keys.push(key);
    // 現(xiàn)在定義儲存api公共的屬性和方法
    // 儲存的cookies的個數(shù)
    this.length = keys.length;
    // 返回第n個cookie的名字,如果n越界則返回null
    this.key = function(n) {
    if (n < 0 || n >= keys.length) return null;
    return keys[n];
    };
    // 返回指定名字的cookie值,如果不存在則返回null
    this.getitem = function(name){
    return cookies[name] || null;
    };
    // 儲存cookie值
    this.setitem = function(key, value) {
    if (!(key in cookies)) {
    // 如果要促成的cookie還不存在
    keys.push(key);
    // 將指定的名字加入到儲存所有cookie名的數(shù)組中
    this.length++;
    // cookies個數(shù)加一
    }
    // 將該名/值對數(shù)據(jù)存儲到cookie對象中.
    cookies[key] = value;
    // 開始正式設(shè)置cookie.
    // 首先將要儲存的cookie的值進(jìn)行編碼
    // 同時創(chuàng)建一個“名稱=編碼后的值”形式的字符串
    var cookie = key + = + encodeuricomponent(value);
    // 將cookie的屬性也加入到該字符串中
    if (maxage) cookie += ; max-age= + maxage;
    if (path) cookie += ; path= + path;
    // 通過document.cookie屬性來設(shè)置cookie
    document.cookie = cookie;
    };
    // 刪除指定的cookie
    this.removeitem = function(key) {
    if (!(key in cookies)) return;
    // 如果cookie不存在,則什么也不做
    // 從內(nèi)部維護(hù)的cookies組刪除指定的cookie
    delete cookies[key];
    // 同時將cookie中的名字也在內(nèi)部的數(shù)組中刪除.
    // 如果使用es5定義的數(shù)組indexof()方法會更加簡單.
    for(var i = 0; i < keys.length; i++) {
    // 遍歷所有的名字
    if (keys[i] === key) {
    // 當(dāng)我們找到了要找的那個
    keys.splice(i,1);
    // 將它從數(shù)組中刪除.
    break;
    }
    }
    this.length--;
    // cookies個數(shù)減一
    // 最終通過將該cookie的值設(shè)置為空字符串
    //以及將有效期設(shè)置為0來刪除指定的cookie.
    document.cookie = key + =; max-age=0;
    };
    // 刪除所有的cookies
    this.clear = function() {
    // 循環(huán)所有的cookies的名字,并將cookies刪除
    for(var i = 0; i < keys.length; i++)
    document.cookie = keys[i] + =; max-age=0;
    // 重置所有的內(nèi)部狀態(tài)
    cookies = {};
    keys = [];
    this.length = 0;
    };
    }