JavaScript實現(xiàn)基于Cookie的存儲類實例
更新時間:2015年04月10日 08:59:04 作者:liuli
這篇文章主要介紹了JavaScript實現(xiàn)基于Cookie的存儲類,實例分析了javascript通過cookie實現(xiàn)數(shù)據(jù)存儲的技巧,非常具有實用價值,需要的朋友可以參考下
本文實例講述了JavaScript實現(xiàn)基于Cookie的存儲類。分享給大家供大家參考。具體分析如下:
通過這個JS類,你可以象使用session一樣使用cookie,非常簡單了!
/*
* CookieStorage.js
* 本類實現(xiàn)像localStorage和sessionStorage一樣的存儲API
* 不同的是,它是基于HTTP Cookies實現(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);
// 對其值進行解碼
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的值進行編碼
// 同時創(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)部維護的cookies組刪除指定的cookie
delete cookies[key];
// 同時將cookie中的名字也在內(nèi)部的數(shù)組中刪除.
// 如果使用ES5定義的數(shù)組indexOf()方法會更加簡單.
for(var i = 0; i < keys.length; i++) {
// 遍歷所有的名字
if (keys[i] === key) {
// 當我們找到了要找的那個
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;
};
}
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- ExtJS與PHP、MySQL實現(xiàn)存儲的方法
- javascript Ext JS 狀態(tài)默認存儲時間
- javascript js cookie的存儲,獲取和刪除
- Node.js中調(diào)用mysql存儲過程示例
- 什么是cookie?js手動創(chuàng)建和存儲cookie
- js瀏覽器本地存儲store.js介紹及應(yīng)用
- jsp使用cookie存儲中文示例分享
- 用JavaScript計算在UTF-8下存儲字符串占用字節(jié)數(shù)
- JavaScript筆記之數(shù)據(jù)屬性和存儲器屬性
- JSON復(fù)雜數(shù)據(jù)處理之Json樹形結(jié)構(gòu)數(shù)據(jù)轉(zhuǎn)Java對象并存儲到數(shù)據(jù)庫的實現(xiàn)
- js仿微博實現(xiàn)統(tǒng)計字符和本地存儲功能
- 瀏覽器中url存儲的JavaScript實現(xiàn)
- 總結(jié)JavaScript三種數(shù)據(jù)存儲方式之間的區(qū)別
相關(guān)文章
JavaScript實現(xiàn)窮舉排列(permutation)算法謎題解答
這篇文章主要介紹了JavaScript實現(xiàn)窮舉排列(permutation)算法謎題解答,窮舉排列是指窮舉一個數(shù)組中各個元素的排列,需要的朋友可以參考下2014-12-12
打算做一個js面向?qū)ο蟮呢澇陨?但是最終是流產(chǎn)了,整理了下廢棄的代碼,回顧了下PPT.想學(xué)習(xí)js面向?qū)ο蟮呐笥岩部梢詤⒖枷隆?/div> 2011-08-08
JavaScript使用Math.Min返回兩個數(shù)中較小數(shù)的方法
這篇文章主要介紹了JavaScript使用Math.Min返回兩個數(shù)中較小數(shù)的方法,涉及javascript中Math.Min方法的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面方法詳解
Uniapp是一款基于Vue.js框架的跨平臺開發(fā)工具,支持在一套代碼中開發(fā)出運行于各大平臺的應(yīng)用程序,這篇文章主要給大家介紹了關(guān)于Uniapp中嵌入H5并在H5中跳轉(zhuǎn)到APP的指定頁面的相關(guān)資料,需要的朋友可以參考下2023-09-09最新評論

