上門一對一計算機家教
當前位置: 首頁 > Web前端家教 >

Javascript自學筆記第17節 Cookie與存儲

點擊: 時間:2016-10-27 來源:北京家教網
隨著Web越來越復雜,開發者急切的需要能夠本地化存儲的腳本功能。這個時候,第一個出現的方案:cookie誕生了。cookie的意圖是:在本地的客戶端的磁盤上以很小的文件形式保存數據。 一. Cookie cookie也叫HTTP Cookie,最初是客戶端與服
隨著Web越來越復雜,開發者急切的需要能夠本地化存儲的腳本功能。這個時候,第一個出現的方案:cookie誕生了。cookie的意圖是:在本地的客戶端的磁盤上以很小的文件形式保存數據。
 
一.Cookie
cookie也叫HTTP Cookie,最初是客戶端與服務器端進行會話使用的。比如,會員登錄,下次回訪網站時無須登錄了;或者是購物車,購買的商品沒有及時付款,過兩天發現購物車里還有之前的商品列表。
HTTP Cookie要求服務器對任意HTTP請求發送Set-Cookie,因此,Cookie的處理原則上需要在服務器環境下進行。當然,現在大部分瀏覽器在客戶端也能實現Cookie的生成和獲取。(目前Chrome不可以在客戶端操作,其他瀏覽器均可)
 
cookie的組成
cookie由名/值對形式的文本組成:name=value。完整格式為:
name=value; [expires=date]; [path=path]; [domain=somewhere.com]; [secure]
中括號是可選,name=value是必選。
document.cookie = 'user=' + encodeURIComponent('李炎恢');   //編碼寫入
alert(decodeURIComponent(document.cookie));                       //解碼讀取
 
expires=date 失效時間,如果沒有聲明,則為瀏覽器關閉后即失效。聲明了失效時間,那么時間到期后方能失效。
var date = new Date();                                      //創建一個
date.setDate(date.getDate() + 7);
document.cookie = "user= " + encodeURIComponent('李炎恢') +";expires=" + date;
 
PS:可以通過Firefox瀏覽器查看和驗證失效時間。如果要提前刪除cookie也非常簡單,只要重新創建cookie把時間設置當前時間之前即可:date.getDate() - 1或new Date(0)。
 
path=path 訪問路徑,當設置了路徑,那么只有設置的那個路徑文件才可以訪問cookie。
var path = '/E:/%E5%A4%87%E8%AF%BE%E7%AC%94%E8%AE%B0/JS1/29/demo';
document.cookie = "user= " + encodeURIComponent('李炎恢') + ";path=" + path;
 
PS:為了操作方便,我直接把路徑復制下來,并且增加了一個目錄以強調效果。
 
domain=domain 訪問域名,用于限制只有設置的域名才可以訪問,那么沒有設置,會默認限制為創建cookie的域名。
var domain = 'yc60.com';
document.cookie = "user= " + encodeURIComponent('李炎恢') + ";domain=" + domain;
 
PS:如果定義了yc60.com,那么在這個域名下的任何網頁都可訪問,如果定義了v.yc60.com,那么只能在這個二級域名訪問該cookie,而主域名和其他子域名則不能訪問。
PS:設置域名,必須在當前域名綁定的服務器上設置,如果在yc60.com服務器上隨意設置其他域名,則會無法創建cookie。
 
secure 安全設置,指明必須通過安全的通信通道來傳輸(HTTPS)才能獲取cookie。
document.cookie = "user= " + encodeURIComponent('李炎恢') + ";secure";
 
PS:https安全通信鏈接需要單獨配置。
 
JavaScript設置、讀取和刪除并不是特別的直觀方便,我們可以封裝成函數來方便調用。
 
//創建cookie
function setCookie(name, value, expires, path, domain, secure) {
       var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
       if (expires instanceof Date)  {
              cookieText += '; expires=' + expires;
       }
       if (path) {
              cookieText += '; expires=' + expires;
       }
       if (domain) {
              cookieText += '; domain=' + domain;
       }
       if (secure) {
              cookieText += '; secure';
       }
       document.cookie = cookieText;
}
 
//獲取cookie
function getCookie(name) {
       var cookieName = encodeURIComponent(name) + '=';
       var cookieStart = document.cookie.indexOf(cookieName);
       var cookieValue = null;
      
       if (cookieStart > -1) {
              var cookieEnd = document.cookie.indexOf(';', cookieStart);
              if (cookieEnd == -1) {
                     cookieEnd = document.cookie.length;
              }
              cookieValue = decodeURIComponent(
document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
       }
       return cookieValue;
}
 
//刪除cookie
function unsetCookie(name) {
       document.cookie = name + "= ; expires=" + new Date(0);
}
 
//失效天數,直接傳一個天數即可
function setCookieDate(day) {
       if (typeof day == 'number' && day > 0) {
              var date = new Date();
              date.setDate(date.getDate() + day);
       } else {
              throw new Error('傳遞的day必須是一個天數,必須比0大');
       }
       return date;
}
 
二.cookie局限性
cookie雖然在持久保存客戶端用戶數據提供了方便,分擔了服務器存儲的負擔。但是還有很多局限性的。
第一:每個特定的域名下最多生成20個cookie(根據不同的瀏覽器有所區別)。
1.IE6或更低版本最多20個cookie
2.IE7和之后的版本最多可以50個cookie。IE7最初也只能20個,之后因被升級不定后增加了。
3.Firefox最多50個cookie
4.Opera最多30個cookie
5.Safari和Chrome沒有做硬性限制。
 
PS:為了更好的兼容性,所以按照最低的要求來,也就是最多不得超過20個cookie。當超過指定的 cookie時,瀏覽器會清理掉早期的cookie。IE和Opera會清理近期最少使用的cookie,Firefox會隨機清理cookie。
 
第二:cookie的最大大約為4096字節(4k),為了更好的兼容性,一般不能超過4095字節即可。
 
第三:cookie存儲在客戶端的文本文件,所以特別重要和敏感的數據是不建議保存在cookie的。比如銀行卡號,用戶密碼等。
 
三.其他存儲
IE提供了一種存儲可以持久化用戶數據,叫做userData,從IE5.0就開始支持。每個數據最多128K,每個域名下最多1M。這個持久化數據存放在緩存中,如果緩存沒有清理,那么會一直存在。
 
<div style="behavior:url(#default#userData)" id="box"></div>
 
addEvent(window, 'load', function () {
       var box = document.getElementById('box');
       box.setAttribute('name', encodeURIComponent('李炎恢'));
       box.save('bookinfo');
 
//box.removeAttribute('name');                    //刪除userDate
//box.save('bookinfo');
 
       box.load('bookinfo');
       alert(decodeURIComponent(box.getAttribute('name')));
});
 
PS:這個數據文件也是保存在cookie目錄中,只要清除cookie即可。如果指定過期日期,則到期后自動刪除,如果沒有指定就是永久保存。
 
Web存儲
在比較高版本的瀏覽器,JavaScript提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。而瀏覽器最低版本為:IE8+、Firefox3.5+、Chrome 4+和Opera10.5+。
 
PS:由于這三個對瀏覽器版本要求較高,我們就只簡單的在Firefox了解一下,有興趣的可以通過關鍵字搜索查詢。
 
//通過方法存儲和獲取
sessionStorage.setItem('name', '李炎恢');
alert(sessionStorage.getItem('name'));
 
//通過屬性存儲和獲取
sessionStorage.book = '李炎恢';
alert(sessionStorage.book);
 
//刪除存儲
sessionStorage.removeItem('name');
 
PS:由于localStorage代替了globalStorage,所以在Firefox、Opera和Chrome目前的最新版本已不支持。
 
//通過方法存儲和獲取
localStorage.setItem('name', '李炎恢');
alert(localStorage.getItem('name'));
  
//通過屬性存儲和獲取
localStorage.book = '李炎恢';
alert(localStorage.book);
  
//刪除存儲
localStorage.removeItem('name');
 
PS:這三個對象都是永久保存的,保存在緩存里,只有手工刪除或者清理瀏覽器緩存方可失效。在容量上也有一些限制,主要看瀏覽器的差異,Firefox3+、IE8+、Opera為5M,,Chrome和Safari為2.5M。
------分隔線----------------------------
30选5开奖查询