WEB前端培訓(xùn)之web Storage可讓網(wǎng)頁(yè)將資料存于本地端的技術(shù)1

這篇文章會(huì)涵蓋 HTML5 Web Storage 的幾個(gè)重點(diǎn)觀念，并介紹其基本用法，以及一些該注意的地方(包含一個(gè)使用 Visual Studio 2012 來(lái)撰寫(xiě)範(fàn)例程式的短片)。
　　Web Storage 要點(diǎn)整理
　　HTML5 的 Web Storage 是一種可讓網(wǎng)頁(yè)將資料儲(chǔ)存于本地端的技術(shù)，其作用如同 cookie。
　　儲(chǔ)存于 Web Storage 中的資料，是以 key-value pair 的形式保存(如同 cookie)。
　　Cookie 儲(chǔ)存空間很小，最多僅能儲(chǔ)存 4 KB 的資料。HTML5 Web Storage 的儲(chǔ)存空間則大得多，且依各家瀏覽器的實(shí)作而不同。一般應(yīng)該至少有 5 MB 的空間。
　　儲(chǔ)存于 cookie 中的資料會(huì)在用戶端瀏覽器與伺服器之間旅行(每次瀏覽器送出 request 至服務(wù)器時(shí)就會(huì)夾帶 cookies)，Web Storage 則不會(huì)(純粹運(yùn)作于用戶端)。這表示 Web Storage 不會(huì)占用寬帶。
　　Web Storage 分為兩種：local storage 和 session storage。細(xì)節(jié)稍后會(huì)說(shuō)明。
　　Web Storage 有兩種
　　Web Storage 分為兩種：local storage 和 session storage。二者的主要差異在于壽命長(zhǎng)短與有效范圍。
　　壽命長(zhǎng)短：儲(chǔ)存于 local storage 中的資料，其生命週期較長(zhǎng)，session storage 則較短，只要瀏覽器視窗或分頁(yè)(tab)關(guān)閉就會(huì)消失。
　　有效范圍：儲(chǔ)存于 local storage 的資料可以跨瀏覽器分頁(yè)(tab)，session storage 則不行。
　　先知道這樣就好，稍后會(huì)進(jìn)一步說(shuō)明，并且用一個(gè)影片來(lái)展示它們的差別。
　　儲(chǔ)存與讀取
　　儲(chǔ)存資料的時(shí)候，是用 Storage 物件的 setItem 方法。這裡的 Storage 物件，指的是 localStorage 或 sessionStorage，看你想要使用哪一個(gè)儲(chǔ)存空間。
　　范例：
window.localStorage.setItem("MyKeyName", "MyDataValue");
 
window.sessionStorage.setItem("MyKeyName", "MyDataValue");

本文版權(quán)歸傳智播客web前端開(kāi)發(fā)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處，謝謝！
作者：傳智播客web前端培訓(xùn)學(xué)院；
首發(fā)：http://m.metathetuscanyresort.com/web/