web客戶端存儲技術

cookie的優(yōu)勢能夠與服務器共享狀態(tài)，每次通過ajax請求的時候都會將cookie附帶到請求的header，服務端能夠直接讀取到本地存儲的數(shù)據(jù)。

成都創(chuàng)新互聯(lián)公司專注于桐廬網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。熱誠為您提供桐廬營銷型網(wǎng)站建設，桐廬網(wǎng)站制作、桐廬網(wǎng)頁設計、桐廬網(wǎng)站官網(wǎng)定制、微信小程序服務，打造桐廬網(wǎng)絡公司原創(chuàng)品牌,更為您提供桐廬網(wǎng)站排名全網(wǎng)營銷落地服務。

GET /sample_page.html HTTP/1.1 Host: www.example.org Cookie: yummy_cookie=choco; tasty_cookie=strawberry

瀏覽器限制情況

cookie在chrome中將不在限制數(shù)據(jù)，但是超過header的允許大小將會報錯

firefox限制30個

Opera第個域名限制50個

demo

為了簡化操作，我所有的cookie的操作都采用js.cookie的庫,有興趣可以在github上面讀源碼。

方法名介紹　 Cookies.get(key) 獲取本地key對應的值，不存在返回undefined Cookies.set(key,value) 將key的值設置成value Cookies.set(key,{}) 支持直接保存object值 Cookies.set(key1,key2,{}) 支持同時設置多個值 Cookies.remove(\'key\') 移除key的值 Cookies.getJSON(\'key\') 獲取key的值，并且直接序列化成Object

Document

上面的demo用來記錄當前客戶端訪問網(wǎng)站的次數(shù)

localStorage

localStorage和sessionStorage的接口是一致的，所以本章所有的案例可以直接改成sessionStorage.

方法名作用 localStorage.setItem(\'key\',\'val\') 將key設置成val localStorage.getItem(\'key\') 獲取key的值 localStorage.removeItem(\'key\') 刪除key的值 localStorage.clear() 刪除所有的值 Demo 獲取訪問次數(shù)

Document

上面的作用是在本地存儲一個以numHits的值，表示訪問的次數(shù)

距離上次訪問的時間

Document

上次的代碼主要現(xiàn)實的三個功能:

如果初次訪問輸出welcome to the site

如果上次訪問的時間超過２０天輸出，welcome back to the site!

如果在２０天以內，輸出:welcome good user

存儲表單數(shù)據(jù)

localStorage實際上只能存儲字符串數(shù)據(jù)，但是可以通過JSON.stringify和JSON.parse來存儲Object對象。

Document

上面的demo主要是：

監(jiān)聽所有表單的輸入事件,通過JSON.stringify()來將Object轉換成字符串進行存儲

進入網(wǎng)站時讀取表單數(shù)據(jù)，如果存在著personForm的值就直接顯示在頁面上

點擊提交按鈕清空personForm數(shù)據(jù)

不同頁面進行通信

有一次面試被問到如何實現(xiàn)幾個標簽的通信，下面的demo實際上就是做了這么一個工作。

Document

上面的demo我們打開兩個頁面，第一個頁面輸入內容，第二個頁面就會觸發(fā)window的storage事件，事件的參數(shù)originalEvent對象中的newValue和oldValue表示上次的值和當前的值。

兼容

if (!window.localStorage) { Object.defineProperty(window, "localStorage", new (function () { var aKeys = [], oStorage = {}; Object.defineProperty(oStorage, "getItem", { value: function (sKey) { return sKey ? this[sKey] : null; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "key", { value: function (nKeyId) { return aKeys[nKeyId]; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "setItem", { value: function (sKey, sValue) { if(!sKey) { return; } document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; }, writable: false, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "length", { get: function () { return aKeys.length; }, configurable: false, enumerable: false }); Object.defineProperty(oStorage, "removeItem", { value: function (sKey) { if(!sKey) { return; } document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; }, writable: false, configurable: false, enumerable: false }); this.get = function () { var iThisIndx; for (var sKey in oStorage) { iThisIndx = aKeys.indexOf(sKey); if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } else { aKeys.splice(iThisIndx, 1); } delete oStorage[sKey]; } for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/s*;s*/); nIdx < aCouples.length; nIdx++) { aCouple = aCouples[nIdx].split(/s*=s*/); if (aCouple.length > 1) { oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); aKeys.push(iKey); } } return oStorage; }; this.configurable = false; this.enumerable = true; })()); }

網(wǎng)頁題目：web客戶端存儲技術
標題來源：http://weahome.cn/article/cjheje.html