HTML5storage提供了一種方式讓網站能夠把信息存儲到你本地的計算機上,并再以后需要的時候進行獲取。這個概念和cookie相似,區別是它是為了更大容量存儲設計的。
HTML5storage提供了一種方式讓網站能夠把信息存儲到你本地的計算機上,并再以后需要的時候進行獲取。這個概念和cookie相似,區別是它是為了更大容量存儲設計的。Cookie的大小是受限的,并且每次你請求一個新的頁面的時候cookie都會被發送過去。HTML5的storage是存儲在你的計算機上,網站在頁面加載完畢后可以通過JavaScript來獲取這些數據。
1、sessionStorage
檢測
!!window.sessionStorage;
常用方法
.key = value
.setItem(key,value)
.getItem(key)
.removeItem(key)
.clear()
事件:
window.onstorage
檢測值得變化,瀏覽器支持不好。
說明:
cookie的存儲限制在了4k之內,相比來說,session storage有了更大的存儲空間,但至于具體多大,這要參照瀏覽器廠商的具體實現。
cookie有一個機制,就是在每次客戶端請求服務器的時候都會將cookie發送給服務器,這無疑會做很多不必要的操作,因為并不是每次請求服務器都需要cookie的所有信息,而session storage很好的解決了這個問題,它不是采取自動發送的方式,這樣就減少了不必要的工作。
通過sessionStorage所存儲數據的生命周期,和Session類似,關閉瀏覽器(或標簽頁)后數據就不存在了。但刷新頁面或使用“前進”、“后退按鈕”后sessionStorage仍然存在。
session storage每個窗口的值都是獨立的(每個窗口都有自己的數據),它的數據會隨著窗口的關閉而消失,窗口間的sessionStorage也是不可以共享的。
setItem中的key、value使用的是字符串的形式進行存儲的。也就是說如果有如下的代碼:setItem(‘count’, 1);通過getItem(‘count’) + 5 得到的將不是預期的6(整數),而是’16’(字符串)。
再次使用setItem設置已經存在的key的value時,新的值將替代舊的值。
當存儲中的數據發生改變時,會觸發相應的事件(window.onstorage),但目前各瀏覽器對此事件的支持并不完善,暫時可以忽略。
2、localStorage
檢測
!!window.localStorage;
方法和sessionStorage相同
說明:
local storage把只把數據存儲在了客戶端使用,不會發送的服務器上(除非你故意這樣做)。
而且對于某一個域下來說,local storage是共享的(多個窗口共享一個“數據庫”)。
localStorage用于持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。
3、globalStorage
這個也是html5中提出來,在瀏覽器關閉以后,使用globalStorage存儲的信息仍能夠保留下來,localStorage一樣,域中任何一個頁面存儲的信息都能被所有的頁面共享
基本語法
globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個命名空間存儲對象來進行讀和寫。
globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網頁都可以通過這個命名空間存儲對象來進行讀和寫。
globalStorage['org'] —— 在.org域名下面的所有網頁都可以通過這個命名空間存儲對象來進行讀和寫。
globalStorage[''] —— 在任何域名下的任何網頁都可以通過這個命名空間存儲對象來進行讀和寫
方法屬性
setItem(key, value) —— 設置或重置 key 值。
getItem(key) —— 獲取 key 值。
removeItem(key) —— 刪除 key 值。
設置 key 值:window.globalStorage["planabc.net"].key = value;
獲取 key 值:value = window.globalStorage["planabc.net"].key;
其它
過期時間同 localStorage,其它的一些特性也和localStorage相似。
現在Firefox只支持當前域下的globalStorage存儲, 如果使用公用域會導致一個這樣一個類似的錯誤“Security error” code: “1000”。