HTML5 storage提供了一種方式讓網(wǎng)站能夠把信息存儲(chǔ)到你本地的計(jì)算機(jī)上，并再以后需要的時(shí)候進(jìn)行獲取。這個(gè)概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。
HTML5storage提供了一種方式讓網(wǎng)站能夠把信息存儲(chǔ)到你本地的計(jì)算機(jī)上，并再以后需要的時(shí)候進(jìn)行獲取。這個(gè)概念和cookie相似，區(qū)別是它是為了更大容量存儲(chǔ)設(shè)計(jì)的。Cookie的大小是受限的，并且每次你請(qǐng)求一個(gè)新的頁面的時(shí)候cookie都會(huì)被發(fā)送過去。HTML5的storage是存儲(chǔ)在你的計(jì)算機(jī)上，網(wǎng)站在頁面加載完畢后可以通過Javascript來獲取這些數(shù)據(jù)。
1、sessionStorage
檢測(cè)
!!window.sessionStorage;
常用方法
.key = value
.setItem(key,value)
.getItem(key)
.removeItem(key)
.clear()
1. window.sessionStorage.name = 'rainman'; // 賦值
2. window.sessionStorage.setItem('name','cnblogs'); // 賦值
3. window.sessionStorage.getItem('name'); // 取值
4. window.sessionStorage.removeItem('name'); // 移除值
5. window.sessionStorage.clear(); // 刪除所有sessionStorage
事件：
window.onstorage
檢測(cè)值得變化，瀏覽器支持不好。
說明：
cookie的存儲(chǔ)限制在了4k之內(nèi)，相比來說，session storage有了更大的存儲(chǔ)空間，但至于具體多大，這要參照瀏覽器廠商的具體實(shí)現(xiàn)。
cookie有一個(gè)機(jī)制，就是在每次客戶端請(qǐng)求服務(wù)器的時(shí)候都會(huì)將cookie發(fā)送給服務(wù)器，這無疑會(huì)做很多不必要的操作，因?yàn)椴⒉皇敲看握?qǐng)求服務(wù)器都需要cookie的所有信息，而session storage很好的解決了這個(gè)問題，它不是采取自動(dòng)發(fā)送的方式，這樣就減少了不必要的工作。
通過sessionStorage所存儲(chǔ)數(shù)據(jù)的生命周期，和Session類似，關(guān)閉瀏覽器（或標(biāo)簽頁）后數(shù)據(jù)就不存在了。但刷新頁面或使用“前進(jìn)”、“后退按鈕”后sessionStorage仍然存在。
session storage每個(gè)窗口的值都是獨(dú)立的（每個(gè)窗口都有自己的數(shù)據(jù)），它的數(shù)據(jù)會(huì)隨著窗口的關(guān)閉而消失，窗口間的sessionStorage也是不可以共享的。
setItem中的key、value使用的是字符串的形式進(jìn)行存儲(chǔ)的。也就是說如果有如下的代碼：setItem(‘count’, 1);通過getItem(‘count’) + 5 得到的將不是預(yù)期的6(整數(shù))，而是’16’(字符串)。
再次使用setItem設(shè)置已經(jīng)存在的key的value時(shí)，新的值將替代舊的值。
當(dāng)存儲(chǔ)中的數(shù)據(jù)發(fā)生改變時(shí)，會(huì)觸發(fā)相應(yīng)的事件（window.onstorage），但目前各瀏覽器對(duì)此事件的支持并不完善，暫時(shí)可以忽略。
localStorage
檢測(cè)
!!window.localStorage;
方法和
sessionStorage
相同
說明：
local storage把只把數(shù)據(jù)存儲(chǔ)在了客戶端使用，不會(huì)發(fā)送的服務(wù)器上（除非你故意這樣做）。
而且對(duì)于某一個(gè)域下來說，local storage是共享的（多個(gè)窗口共享一個(gè)“數(shù)據(jù)庫”）。
-
localStorage用于持久化的
，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的。
- //結(jié)合JSON.stringify使用更強(qiáng)大
- var person = {'name': 'rainman', 'age': 24};
- localStorage.setItem("me", JSON.stringify(person));
- JSON.parse(localStorage.getItem('me')).name; // 'rainman'
- /**
- JSON.stringify，將JSON數(shù)據(jù)轉(zhuǎn)化為字符串
JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred","age":24}'
JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]'
- JSON.parse，反解JSON.stringify
JSON.parse('["a","b","c"]') // ["a","b","c"]
- */
**3
、
Database Storage**
對(duì)簡(jiǎn)單的數(shù)據(jù)存儲(chǔ)，使用sessionStorage和localStorage能夠很好地完成，但是在對(duì)瑣碎的關(guān)系數(shù)據(jù)進(jìn)行處理之外，它就力所不及了。而這正是HTML 5 的“
Web SQL Database ”API 接口的應(yīng)用所在。
globalStorage
這個(gè)也是
中提出來，在瀏覽器關(guān)閉以后，使用
globalStorage
存儲(chǔ)的信息仍能夠保留下來，
localStorage
一樣，域中任何一個(gè)頁面存儲(chǔ)的信息都能被所有的頁面共享
基本語法
- globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來進(jìn)行讀和寫。
- globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有網(wǎng)頁都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來進(jìn)行讀和寫。
- globalStorage['org'] —— 在.org域名下面的所有網(wǎng)頁都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來進(jìn)行讀和寫。
- globalStorage[''] —— 在任何域名下的任何網(wǎng)頁都可以通過這個(gè)命名空間存儲(chǔ)對(duì)象來進(jìn)行讀和寫
方法屬性
- setItem(key, value) —— 設(shè)置或重置 key 值。
- getItem(key) —— 獲取 key 值。
- removeItem(key) —— 刪除 key 值。
- 設(shè)置 key 值：window.globalStorage["planabc.net"].key = value;
- 獲取 key 值：value = window.globalStorage["planabc.net"].key;
其它
- 過期時(shí)間同 localStorage，其它的一些特性也和localStorage相似。
- 現(xiàn)在Firefox只支持當(dāng)前域下的globalStorage存儲(chǔ)， 如果使用公用域會(huì)導(dǎo)致一個(gè)這樣一個(gè)類似的錯(cuò)誤“Security error” code: “1000”。
