第一百二十四節，JavaScriptCookie與存儲

JavaScriptCookie與存儲

 

學習要點：

1.cookie

2.cookie侷限性

3.其餘存儲

 

隨着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是必選。

 

向磁盤寫入cookie

使用方式：

document.cookie = 名稱

document.cookie = 名稱 = 值

完整形式：document.cookie = 'user=值;expires=失效時間;path=訪問路徑;domain=訪問域名;secure=安全的https限制通信';

若是名稱或者值有中文須要編碼和解碼

document.cookie = 'user=' + encodeURIComponent('李炎恢');    //編碼方式向磁盤寫入cookie
alert(decodeURIComponent(document.cookie));                //解碼方式讀取寫入的cookie

 

讀取寫入的cookie

使用方式：

document.cookie

若是寫入有編碼，讀取就須要解碼

document.cookie = 'user=' + encodeURIComponent('李炎恢');    //編碼方式向磁盤寫入cookie
alert(decodeURIComponent(document.cookie));                //解碼方式讀取寫入的cookie

 

expires=cookie有效時間

每一個瀏覽器都各自保存了cookie文件，設置有效時間，就是告訴瀏覽器這個cookie保存多久，

失效時間，若是沒有聲明，則爲瀏覽器關閉後即失效。聲明瞭失效時間，那麼時間到期後方能失效。

設置失效時間

expires=失效時間（單位Mon Dec 26 2016 15:07:40 GMT+0800）

 

var date = new Date();                        //建立日期對象
//getDate獲取系統當前日期
//setDate將日期轉換成毫秒數
date.setDate(date.getDate() + 7);
//alert(date); 返回Mon Dec 26 2016 15:07:40 GMT+0800
//向磁盤寫入一個cookie文件，名稱爲user，值爲林貴秀編碼，有效時間expires=有效日期
document.cookie = "user= " + encodeURIComponent('林貴秀') +";expires=" + date;

 

PS：能夠經過Firefox瀏覽器查看和驗證失效時間。若是要提早刪除cookie也很是簡單，只要從新建立cookie把時間設置當前時間以前便可：date.getDate() - 1或new Date(0)。

 

 

path=cookie訪問路徑

訪問路徑，當設置了路徑，那麼只有設置的那個路徑文件才能夠訪問cookie。

var date = new Date();                        //建立日期對象
//getDate獲取系統當前日期
//setDate將日期轉換成毫秒數
date.setDate(date.getDate() + 7);
//alert(date); 返回Mon Dec 26 2016 15:07:40 GMT+0800
var path = '/js/'; //表示當前工程目錄下的js文件夾下
//向磁盤寫入一個cookie文件，名稱爲user，值爲林貴秀編碼，有效時間expires=有效日期
document.cookie = "user= " + encodeURIComponent('林貴秀') +";expires=" + date + ";path=" + path;

 

domain=cookie訪問域名

訪問域名，用於限制只有設置的域名才能夠訪問，那麼沒有設置，會默認限制爲建立cookie的域名

var date = new Date();                        //建立日期對象
//getDate獲取系統當前日期
//setDate將日期轉換成毫秒數
date.setDate(date.getDate() + 7);
//alert(date); 返回Mon Dec 26 2016 15:07:40 GMT+0800
var path = '/js/'; //表示當前工程目錄下的js文件夾下
var domain = 'localhost'; //設置訪問域名
//向磁盤寫入一個cookie文件，名稱爲user，值爲林貴秀編碼，有效時間expires=有效日期
document.cookie = "user= " + encodeURIComponent('林貴秀') +";expires=" + date + ";path=" + path + ";domain=" + domain;

PS：若是定義了60.com，那麼在這個域名下的任何網頁均可訪問，若是定義了v.60.com，那麼只能在這個二級域名訪問該cookie，而主域名和其餘子域名則不能訪問。

PS：設置域名，必須在當前域名綁定的服務器上設置，若是在60.com服務器上隨意設置其餘域名，則會沒法建立cookie。

 

secure安全的https限制通信

安全設置，指明必須經過安全的通訊通道來傳輸(HTTPS)才能獲取cookie。僅限加密鏈接

var date = new Date();                        //建立日期對象
//getDate獲取系統當前日期
//setDate將日期轉換成毫秒數
date.setDate(date.getDate() + 7);
//alert(date); 返回Mon Dec 26 2016 15:07:40 GMT+0800
var path = '/js/'; //表示當前工程目錄下的js文件夾下
var domain = 'localhost'; //設置訪問域名
//向磁盤寫入一個cookie文件，名稱爲user，值爲林貴秀編碼，有效時間expires=有效日期
document.cookie = "user= " + encodeURIComponent('林貴秀') +";expires=" + date + ";path=" + path + ";domain=" + domain + ";secure";

PS：https安全通訊連接須要單獨配置。

 

JavaScript設置、讀取和刪除並非特別的直觀方便，咱們能夠封裝成函數來方便調用。

//建立cookie
setCookie('usr1', '林閨秀1', 1);
setCookie('usr2', '林閨秀2', 2);
setCookie('usr3', '林閨秀3', 3);

//建立cookie，建立cookie函數
//setCookie函數接收cookie，名稱，值，失效日期(天數)，[訪問路徑，訪問域名，安全通信https限制]
function setCookie(name, value, expires, path, domain, secure) {
    //將接收到的名稱和值編碼後，格式化成鍵值對
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (typeof expires == "number" && expires > 0) {  //判斷接收到的失效日期，是不是數值類型而且大於0
        var date = new Date();         //建立日期對象
        date.setDate(date.getDate() + expires);  //獲取系統當前時間，加上接收到的失效時間等於總失效日期
        cookieText += '; expires=' + date;  //將失效日期累加到cookieText
    }
    if (path) {   //判斷訪問路徑是否存在
        cookieText += '; expires=' + path;  //若是訪問路徑存在，將訪問路徑累加到cookieText
    }
    if (domain) {  //判斷訪問域名是否存在
        cookieText += '; domain=' + domain;  //若是訪問域名存在，將訪問域名累加到cookieText
    }
    if (secure) {  //判斷https通信限制是否存在
        cookieText += '; secure';  //若是https通信限制存在，將https通信限制累加到cookieText
    }
    document.cookie = cookieText;  //向磁盤寫入cookie文件
}

//獲取cookie
alert(getCookie('usr1'));
alert(getCookie('usr2'));
alert(getCookie('usr3'));

//獲取cookie，獲取cookie函數，獲取cookie名稱的值
function getCookie(name) {  //接收要獲取的cookie名稱，
    //將接收到的cookie名稱進行編碼後，格式化賦值給cookieName
    var cookieName = encodeURIComponent(name) + '=';
    //用編碼和格式化後的cookie名稱，在document.cookie裏查找它的索引位置
    var cookieStart = document.cookie.indexOf(cookieName);
    //默認cookie值爲空
    var cookieValue = null;

    if (cookieStart > -1) {   //判斷若是查找cookie名稱的索引大於負一
        //從cookie名稱開始搜索;的位置
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) { //判斷若是從cookie名稱開始搜索;的位置等於負一
            cookieEnd = document.cookie.length; //cookieEnd從新賦值等於document.cookie的長度
        }
        //截取字符串，cookie名稱位置加上cookie名稱長度等於截取開始位置，從cookie名稱開始搜索;引號的位置爲結束位置
        //將截取的字符串解碼
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    return cookieValue;  //返回解碼後的cookie名稱值
}

//刪除cookie
unsetCookie('usr1');

//刪除cookie，刪除cookie函數
function unsetCookie(name) {  //接收要刪除cookie名稱
    //從新建立此cookie，cookie名稱等於空，過時時間設置成過去，這樣cookie就失效了
    document.cookie = name + "= ; expires=" + new Date(0);
}

 

二．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的。好比銀行卡號，用戶密碼等。

 

 

三．其餘存儲

userData儲存IE提供的一種存儲其實屬於css，非IE不支持，【及不推薦使用】IE10以上也不支持，爲了將移除

IE提供了一種存儲能夠持久化用戶數據，叫作userData，從IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據存放在緩存中，若是緩存沒有清理，那麼會一直存在。

//首先要在html頁面寫上cssstyle="behavior:url(#default#userData)"
//<div style="behavior:url(#default#userData)" id="box"></div>

addEvent(window, 'load', function () {    //建立事件，等待頁面加載完畢後激發函數
    //經過id獲取到標籤元素，
    var box = document.getElementById('box');
    //給元素添加一個屬性名稱和值，若是屬性名稱和值有中文須要編碼
    box.setAttribute('name', encodeURIComponent('林貴秀'));
    //保存文件，裏面寫名稱，至關於cookie名稱
    box.save('bookinfo');

    //box.removeAttribute('name');            //刪除userDate
    //box.save('bookinfo');

    box.load('bookinfo'); //至關於加載cookie名稱，裏面接收名稱
    //解碼打印出元素的屬性值
    alert(decodeURIComponent(box.getAttribute('name')));
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

Web存儲

在比較高版本的瀏覽器，JavaScript提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。而瀏覽器最低版本爲：IE8+、Firefox3.5+、Chrome 4+和Opera10.5+。

PS：因爲這三個對瀏覽器版本要求較高，咱們就只簡單的在Firefox瞭解一下，有興趣的能夠經過關鍵字搜索查詢。

sessionStorage數據Web存儲

//經過方法存儲和獲取
sessionStorage.setItem('name', '李炎恢');  //存儲數據
alert(sessionStorage.getItem('name')); //獲取存儲數據

//經過屬性存儲和獲取
sessionStorage.book = '李炎恢';  //存儲數據
alert(sessionStorage.book);  //獲取存儲數據

//刪除存儲
sessionStorage.removeItem('name');

 

因爲localStorage代替了globalStorage，因此在Firefox、Opera和Chrome目前的最新版本已不支持。

localStorage數據Web存儲

//經過方法存儲和獲取
localStorage.setItem('name', '李炎恢');  //儲存數據
alert(localStorage.getItem('name'));  //讀取儲存數據
　　
//經過屬性存儲和獲取
localStorage.book = '李炎恢';  //儲存數據
alert(localStorage.book);   //讀取儲存數據
　　
//刪除存儲
localStorage.removeItem('name');

PS：這三個對象都是永久保存的，保存在緩存裏，只有手工刪除或者清理瀏覽器緩存方可失效。在容量上也有一些限制，主要看瀏覽器的差別，Firefox3+、IE8+、Opera爲5M，，Chrome和Safari爲2.5M。