js基於Cookie的儲存類例項程式碼

本文章主要介紹了JavaScript實現基於Cookie的儲存類,例項分析了javascript通過cookie實現資料儲存的技巧,非常具有實用價值,需要的朋友可以參考下，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
/*
 * CookieStorage.js
 * 本類實現像localStorage和sessionStorage一樣的儲存API
 * 不同的是，它是基於HTTP Cookies實現的.
 */
function CookieStorage(maxage, path) {
// 兩個引數分別代表儲存有效期和作用域
 // 獲取一個儲存全部cookies的物件
 var cookies = (function() {
 // 型別之前介紹的getCookies函式
  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對應的值
   value = decodeURIComponent(value);
   // 對其值進行解碼
   cookies[name] = value;
   // 將名值對儲存到物件中
  }
  return cookies;
 }());
 // 將所有cookie的名字儲存到一個陣列中
 var keys = [];
 for(var key in cookies) keys.push(key);
 // 現在定義儲存API公共的屬性和方法
 // 儲存的cookies的個數
 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名的陣列中
   this.length++;
   // cookies個數加一
  }
  // 將該名/值對資料儲存到cookie物件中.
  cookies[key] = value;
  // 開始正式設定cookie.
  // 首先將要儲存的cookie的值進行編碼
  // 同時建立一個“名稱=編碼後的值”形式的字串
  var cookie = key + "=" + encodeURIComponent(value);
  // 將cookie的屬性也加入到該字串中
  if (maxage) cookie += "; max-age=" + maxage;
  if (path) cookie += "; path=" + path;
  // 通過document.cookie屬性來設定cookie
  document.cookie = cookie;
 };
 // 刪除指定的cookie
 this.removeItem = function(key) {
  if (!(key in cookies)) return;
  // 如果cookie不存在，則什麼也不做
  // 從內部維護的cookies組刪除指定的cookie
  delete cookies[key];
  // 同時將cookie中的名字也在內部的陣列中刪除.
  // 如果使用ES5定義的陣列indexOf()方法會更加簡單.
  for(var i = 0; i < keys.length; i++) {
  // 遍歷所有的名字
   if (keys[i] === key) { 
   // 當我們找到了要找的那個
    keys.splice(i,1); 
 // 將它從陣列中刪除.
    break;
   }
  }
  this.length--; 
  // cookies個數減一
  // 最終通過將該cookie的值設定為空字串
  //以及將有效期設定為0來刪除指定的cookie.
  document.cookie = key + "=; max-age=0";
 };
 // 刪除所有的cookies
 this.clear = function() {
  // 迴圈所有的cookies的名字，並將cookies刪除
  for(var i = 0; i < keys.length; i++)
    document.cookie = keys[i] + "=; max-age=0";
  // 重置所有的內部狀態
  cookies = {};
  keys = [];
  this.length = 0;
 };
}