TML本地存儲有cookies、 localStorage 、sessionStorage、Web SQL、IndexedDB。
以下是它們的區別
. 各種存儲方案的簡單對比
UserData僅IE支持, Google Gears SQLite需要插件,Flash已經伴隨著HTML5的出現漸漸退出了歷史舞臺,因此今天我們的主角只有他們三個:Cookie,LocalStorge,SesstionStorge;
2. Cookie
作為一個前端和Cookie打交道的次數肯定不會少了,Cookie算是比較古老的技術了
1993 年,網景公司雇員 Lou Montulli 為了讓用戶在訪問某網站時,進一步提高訪問速度,同時也為了進一步實現個人化網絡,發明了今天廣泛使用的 Cookie。
2.1 Cookie的特點
我們先來看下Cookie的特點:
cookie的內容主要包括:名字,值,過期時間,路徑和域。路徑與域一起構成cookie的作用范圍。若不設置過期時間,則表示這個cookie的生命期為瀏覽器會話期間,關閉瀏覽器窗口,cookie就消失。這種生命期為瀏覽器會話期的cookie被稱為會話cookie。會話cookie一般不存儲在硬盤上而是保存在內存里,當然這種行為并不是規范規定的。若設置了過期時間,瀏覽器就會把cookie保存到硬盤上,關閉后再次打開瀏覽器,這些cookie仍然有效直到超過設定的過期時間。存儲在硬盤上的cookie可以在不同的瀏覽器進程間共享,比如兩個IE窗口。而對于保存在內存里的cookie,不同的瀏覽器有不同的處理方式。
2.2 Session
說到Cookie就不能不說Session。
Session機制。session機制是一種服務器端的機制,服務器使用一種類似于散列表的結構(也可能就是使用散列表)來保存信息。當程序需要為某個客戶端的請求創建一個session時,服務器首先檢查這個客戶端的請求里是否已包含了一個session標識(稱為session id),如果已包含則說明以前已經為此客戶端創建過session,服務器就按照session id把這個session檢索出來使用(檢索不到,會新建一個),如果客戶端請求不包含session id,則為此客戶端創建一個session并且生成一個與此session相關聯的session id,session id的值應該是一個既不會重復,又不容易被找到規律以仿造的字符串,這個session id將被在本次響應中返回給客戶端保存。保存這個session id的方式可以采用cookie,這樣在交互過程中瀏覽器可以自動的按照規則把這個標識發送給服務器。一般這個cookie的名字都是類似于SEEESIONID。但cookie可以被人為的禁止,則必須有其他機制以便在cookie被禁止時仍然能夠把session id傳遞回服務器。經常被使用的一種技術叫做URL重寫,就是把session id直接附加在URL路徑的后面。比如:http://damonare.cn?sessionid=123456還有一種技術叫做表單隱藏字段。就是服務器會自動修改表單,添加一個隱藏字段,以便在表單提交時能夠把session id傳遞回服務器。比如:
<form name="testform" action="/xxx"> <input type="hidden" name="sessionid" value="123456"> <input type="text"> </form>
實際上這種技術可以簡單的用對action應用URL重寫來代替。
2.3 Cookie和Session簡單對比
Cookie和Session 的區別:
2.4 document.cookie的屬性
expires屬性
指定了coolie的生存期,默認情況下coolie是暫時存在的,他們存儲的值只在瀏覽器會話期間存在,當用戶推出瀏覽器后這些值也會丟失,如果想讓cookie存在一段時間,就要為expires屬性設置為未來的一個過期日期。現在已經被max-age屬性所取代,max-age用秒來設置cookie的生存期。
path屬性
它指定與cookie關聯在一起的網頁。在默認的情況下cookie會與創建它的網頁,該網頁處于同一目錄下的網頁以及與這個網頁所在目錄下的子目錄下的網頁關聯。
domain屬性
domain屬性可以使多個web服務器共享cookie。domain屬性的默認值是創建cookie的網頁所在服務器的主機名。不能將一個cookie的域設置成服務器所在的域之外的域。例如讓位于http://order.damonare.cn的服務器能夠讀取http://catalog.damonare.cn設置的cookie值。如果http://catalog.damonare.cn的頁面創建的cookie把自己的path屬性設置為“/”,把domain屬性設置成“.damonare.cn”,那么所有位于http://catalog.damonare.cn的網頁和所有位于http://orlders.damonare.cn的網頁,以及位于http://damonare.cn域的其他服務器上的網頁都可以訪問這個cookie。
secure屬性
它是一個布爾值,指定在網絡上如何傳輸cookie,默認是不安全的,通過一個普通的http連接傳輸
2.5 cookie實戰
這里我們使用javascript來寫一段cookie,借用w3cschool的demo:
function getCookie(c_name){ if (document.cookie.length>0){ c_start=document.cookie.indexOf(c_name + "=") if (c_start!=-1){ c_start=c_start + c_name.length+1 c_end=document.cookie.indexOf(";",c_start) if (c_end==-1) c_end=document.cookie.length return unescape(document.cookie.substring(c_start,c_end)) } } return ""; } function setCookie(c_name,value,expiredays){ var exdate=new Date() exdate.setDate(exdate.getDate()+expiredays) document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : "; expires="+exdate.toUTCString()) } function checkCookie(){ username=getCookie('username') if(username!=null && username!=""){alert('Welcome again '+username+'!')} else{ username=prompt('Please enter your name:',"") if (username!=null && username!=""){ setCookie('username',username,355) } } }
注意這里對Cookie的生存期進行了定義,也就是355天
3. localStorage
這是一種持久化的存儲方式,也就是說如果不手動清除,數據就永遠不會過期。
它也是采用Key - Value的方式存儲數據,底層數據接口是sqlite,按域名將數據分別保存到對應數據庫文件里。它能保存更大的數據(IE8上是10MB,Chrome是5MB),同時保存的數據不會再發送給服務器,避免帶寬浪費。
3.1 localStorage的屬性方法
下表是localStorge的一些屬性和方法
屬性方法 說明 localStorage.length 獲得storage中的個數 localStorage.key(n) 獲得storage中第n個元素對的鍵值(第一個元素是0) localStorage.getItem(key) 獲取鍵值key對應的值 localStorage.key 獲取鍵值key對應的值 localStorage.setItem(key, value) 添加數據,鍵值為key,值為value localStorage.removeItem(key) 移除鍵值為key的數據 localStorage.clear() 清除所有數據
3.2 localStorage的缺點
4. sessionStorage
和服務器端使用的session類似,是一種會話級別的緩存,關閉瀏覽器會數據會被清除。不過有點特別的是它的作用域是窗口級別的,也就是說不同窗口間的sessionStorage數據不能共享的。使用方法(和localStorage完全相同):
屬性方法 說明 sessionStorage.length 獲得storage中的個數 sessionStorage.key(n) 獲得storage中第n個元素對的鍵值(第一個元素是0) sessionStorage.getItem(key) 獲取鍵值key對應的值 sessionStorage.key 獲取鍵值key對應的值 sessionStorage.setItem(key, value) 添加數據,鍵值為key,值為value sessionStorage.removeItem(key) 移除鍵值為key的數據 sessionStorage.clear() 清除所有數據
5. sessionStorage和localStorage的區別
5.1 測試
sessionStorage:
if (sessionStorage.pagecount){ sessionStorage.pagecount=Number(sessionStorage.pagecount) +1; }else{ sessionStorage.pagecount=1; } console.log("Visits "+ sessionStorage.pagecount + " time(s).");
測試過程:我們在控制臺輸入上述代碼查看打印結果
控制臺首次輸入代碼:
關閉窗口,控制臺再次輸入代碼:
所謂的關閉窗口即銷毀,就是這樣,關閉窗口重新打開輸入代碼輸出結果還是上面圖片的樣子,也就是說關閉窗口后sessionStorage.pagecount即被銷毀,除非重心創建。或者從歷史記錄進入才會相關數據才會存在。好的,我們再來看下localStorge表現:
if (localStorage.pagecount){ localStorage.pagecount=Number(localStorage.pagecount) +1; }else{ localStorage.pagecount=1; } console.log("Visits "+ localStorage.pagecount + " time(s).");
控制臺首次輸入代碼:
關閉窗口,控制臺再次輸入代碼:
6. web Storage和cookie的區別
Web Storage(localStorage和sessionStorage)的概念和cookie相似,區別是它是為了更大容量存儲設計的。Cookie的大小是受限的,并且每次你請求一個新的頁面的時候Cookie都會被發送過去,這樣無形中浪費了帶寬,另外cookie還需要指定作用域,不可以跨域調用。
除此之外,Web Storage擁有setItem,getItem,removeItem,clear等方法,不像cookie需要前端開發者自己封裝setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是與服務器進行交互,作為HTTP規范的一部分而存在 ,而Web Storage僅僅是為了在本地“存儲”數據而生
javaScript本地緩存的方法我們主要講述以下四種:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。