首頁技術(shù)文章正文

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

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

這篇文章會涵蓋 HTML5 Web Storage 的幾個重點觀念,并介紹其基本用法,以及一些該注意的地方(包含一個使用 Visual Studio 2012 來撰寫範(fàn)例程式的短片)。
  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。細(xì)節(jié)稍后會說明。
  Web Storage 有兩種
  Web Storage 分為兩種:local storage 和 session storage。二者的主要差異在于壽命長短與有效范圍。
  壽命長短:儲存于 local storage 中的資料,其生命週期較長,session storage 則較短,只要瀏覽器視窗或分頁(tab)關(guān)閉就會消失。
  有效范圍:儲存于 local storage 的資料可以跨瀏覽器分頁(tab),session storage 則不行。
  先知道這樣就好,稍后會進(jìn)一步說明,并且用一個影片來展示它們的差別。
  儲存與讀取
  儲存資料的時候,是用 Storage 物件的 setItem 方法。這裡的 Storage 物件,指的是 localStorage 或 sessionStorage,看你想要使用哪一個儲存空間。
  范例:
window.localStorage.setItem("MyKeyName", "MyDataValue");
 
window.sessionStorage.setItem("MyKeyName", "MyDataValue");


本文版權(quán)歸黑馬程序員web前端開發(fā)學(xué)院所有,歡迎轉(zhuǎn)載,轉(zhuǎn)載請注明作者出處,謝謝!
作者:黑馬程序員web前端培訓(xùn)學(xué)院;
首發(fā):http://web.itheima.com/ 

分享到:
在線咨詢 我要報名
和我們在線交談!