爲何會引入Storage(sessionStorage,localStorage,globalStorage)
- Web storage的目的是克服由cookie帶來的限制,當數據須要嚴格控制在客戶端上時,無須持續將數據發回服務器。主要是提供一種在cookie以外存儲會話數據的途徑和提供一種能夠大量跨會話存在的數據機制;sessionStorage 對象應該主要用於僅針對會話的小段數據的存儲。若是須要跨越會話存儲數據, 那麼 localStorage 更爲合適。
Storage介紹
- 對於 localStorage 而言,大多數桌面瀏覽器會設置每一個來源 5MB 的限制。Chrome 和 Safari 對每 個來源的限制是 2.5MB。而 iOS 版 Safari 和 Android 版 WebKit 的限制也是 2.5MB。
- 對 sessionStorage 的限制也是因瀏覽器而異。有的瀏覽器對 sessionStorage 的大小沒有限制, 但 Chrome、Safari、iOS 版 Safari 和 Android 版 WebKit 都有限制,也都是 2.5MB。IE8+和 Opera 對 sessionStorage 的限制是 5MB
sessionStorage介紹
sessionStorage對象存儲特定某個會話的數據(綁定於某個服務器的會話),即該數據只保存到瀏覽器關閉(cookie也是會話級別); 存儲在seesionStorage中的數據能夠跨越頁面刷新頁面存在,javascript
localStorage介紹
要訪問同一個localStoarge對象,頁面必須來自同一個域名(子域名無效),使用同一種 協議,在同一個端口上。java
Storage底層原理
- sessionStorage:將數據保存在session對象中。所謂session,是指用戶在瀏覽某個網站時,從進入網站到瀏覽器關閉所通過的這段時間,session對象可用來保存在這段時間內所要求保存的任何數據.
- localStorage:將數據保存在客戶端本地的硬件設備(磁盤文件)中,即便瀏覽器關閉了,該數據仍然存在,下次打開瀏覽器訪問網站時仍然可用 永久保存,除非程序或人工刪除,沒有過時時間.
Storage的特色
(1)都會在瀏覽器端保存,有大小限制,同源限制;
(2) sessionStorage在(會話級別)窗口關閉前有效;localStorage持久化的本地存儲除非用戶主動刪除數據,不然數據是永遠不會過時的;
(3)sessionStorage不能共享,localStorage在同源文檔之間共享;
(4)對於localstorage而言,大多數桌面的瀏覽器都會設置來源5MB的限制,chorme和Safari對每一個來源的限制是2.5MB;對於sessionStorage的限制也是由於瀏覽器而異,有的瀏覽器對sessionStage的大小是沒有限制的,但chrome,safari都是2.5MB.
(5)只能存儲字符串 (JSON.stringify() 對象-->字符串(JSON.parse() 字符串-->對象)
![](http://static.javashuo.com/static/loading.gif)
![](http://static.javashuo.com/static/loading.gif)
Storage的優勢
相比 cookie ,Web Storage 的優勢主要表如今存儲空間更大,可存儲的內容更大。cookie每次都隨請求數據發送到服務器端,Web Storage不會和請求數據一同發送到服務器端,佔用帶寬更少
Storage的缺點
如今全部瀏覽器都支持 cookie 操做,而只有如今瀏覽器才支持 Web Storage 操做,若是須要兼容老舊瀏覽器,就不能使用 Web Storage。而且Storage只能存儲字符串類型的數據
Storage(localStorage和sessionStorage)的方法
clear();刪除全部值;firefox中沒有實現;
getItem(name);根據指定的名字name獲取對應的值;
key(index):獲取index位置處的值的名字;
removeItem(name):刪除由name獲取對應的值;
setItem(name,value);爲指定name設置對應的value值;
sessionStorage.setItem("key", "value") ////使用方法存儲數據
sessionStorage.book = "Professional JavaScript"; //使用屬性存儲數據
var value = sessionStorage.getItem("key");
sessionStorage.removeItem("key") // removeItem刪除key
sessionStorage.clear() // clear清除全部的key/value
Storage的應用
sessionStorage: 敏感帳號一次性登陸
localStorage: 長期登陸、判斷用戶是否已登陸、適合長期保存在本地的數據;Web Storage 的特色,它主要被用於儲存一些不常常改動的,不敏感的數據,好比全國省市區縣信息。還能夠存儲一些不過重要的跟用戶相關的數據,好比說用戶的頭像地址、主題顏色等,這些信息能夠先存儲在用戶本地一份,便於快速呈現,等真正從服務器端讀取成功後再更改頭像地址,主題顏色。另外,基於 storage 事件特色,Web Storage 還能夠用於同域不一樣窗口間的通訊。