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

更新時間:2017-06-09 來源:黑馬程序員web前端培訓(xùn)學院瀏覽量:

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

window.sessionStorage.setItem("MyKeyName", "MyDataValue");