sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web請求之間保存數(shù)據(jù)。有了本地數(shù)據(jù),就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。sessionStorage、 localStorage、cookie都是在瀏覽器端存儲的數(shù)據(jù),其中sessionStorage的概念很特別,引入了一個“瀏覽器窗口”的概念。 sessionStorage是在同源的同窗口(或tab)中,始終存在的數(shù)據(jù)。也就是說只要這個瀏覽器窗口沒有關(guān)閉,即使刷新頁面或進入同源另一頁面, 數(shù)據(jù)仍然存在。關(guān)閉窗口后,sessionStorage即被銷毀。同時“獨立”打開的不同窗口,即使是同一頁面,sessionStorage對象也是 不同的。Web Storage帶來的好處:減少網(wǎng)絡(luò)流量:一旦數(shù)據(jù)保存在本地后,就可以避免再向服務(wù)器請求數(shù)據(jù),因此減少不必要的數(shù)據(jù)請求,減 少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。快速顯示數(shù)據(jù):性能好,從本地讀數(shù)據(jù)比通過網(wǎng)絡(luò)從服務(wù)器獲得數(shù)據(jù)快得多,本地數(shù)據(jù)可以即時獲得。再加上網(wǎng)頁本 身也可以有緩存,因此整個頁面和數(shù)據(jù)都在本地的話,可以立即顯示。臨時存儲:很多時候數(shù)據(jù)只需要在用戶瀏覽一組頁面期間使用,關(guān)閉窗口后數(shù)據(jù)就可以丟棄 了,這種情況使用sessionStorage非常方便。瀏覽器本地存儲與服務(wù)器端存儲之間的區(qū)別其實數(shù)據(jù)既可以在瀏覽器本地存儲,也可以在服務(wù)器端存儲。瀏覽器端可以保存一些數(shù)據(jù),需要的時候直接從本地獲取,sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數(shù)據(jù)。服 務(wù)器端也可以保存所有用戶的所有數(shù)據(jù),但需要的時候瀏覽器要向服務(wù)器請求數(shù)據(jù)。1.服務(wù)器端可以保存用戶的持久數(shù)據(jù),如數(shù)據(jù)庫和云存儲將用戶的大量數(shù)據(jù)保 存在服務(wù)器端。2.服務(wù)器端也可以保存用戶的臨時會話數(shù)據(jù)。服務(wù)器端的session機制,如jsp的 session 對象,數(shù)據(jù)保存在服務(wù)器上。實現(xiàn)上,服務(wù)器和瀏覽器之間僅需傳遞session id即可,服務(wù)器根據(jù)session id找到對應(yīng)用戶的session對象。會話數(shù)據(jù)僅在一段時間內(nèi)有效,這個時間就是server端設(shè)置的session有效期。服務(wù)器端保存所有的用戶的數(shù)據(jù),所以服務(wù)器端的開銷較大,而瀏覽器端保存則把不同用戶需要的數(shù)據(jù)分布保存在用戶各自的瀏覽器中。瀏覽器端一般只用來存儲小數(shù)據(jù),而服務(wù)器可以存儲大數(shù)據(jù)或小數(shù)據(jù)。服務(wù)器存儲數(shù)據(jù)安全一些,瀏覽器只適合存儲一般數(shù)據(jù)。sessionStorage 、localStorage 和 cookie 之間的區(qū)別共 同點:都是保存在瀏覽器端,且同源的。區(qū)別:cookie數(shù)據(jù)始終在同源的http請求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來回傳 遞。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。cookie數(shù)據(jù)還有路徑(path)的概念, 可以限制cookie只屬于某個路徑下。存儲大小限制也不同,cookie數(shù)據(jù)不能超過4k,同時因為每次http請求都會攜帶cookie,所以 cookie只適合保存很小的數(shù)據(jù),如會話標(biāo)識。sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,可以達到5M或更大。數(shù)據(jù)有效期不同,sessionStorage:僅在當(dāng)前瀏覽器窗口關(guān)閉前有效, 自然也就不可能持久保持;localStorage:始終有效,窗口或瀏覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù);cookie只在設(shè)置的cookie過期 時間之前一直有效,即使窗口或瀏覽器關(guān)閉。作用域不同,sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個頁 面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。Web Storage 的 api 接口使用更方便。
sessionStorage ****和 ****localStorage 之間的區(qū)別見上面的區(qū)別3、4
sessionStorage與頁面 js 數(shù)據(jù)對象的區(qū)別頁 面中一般的 js 對象或數(shù)據(jù)的生存期是僅在當(dāng)前頁面有效,因此刷新頁面或轉(zhuǎn)到另一頁面這樣的重新加載頁面的情況,數(shù)據(jù)就不存在了。而sessionStorage 只要同源的同窗口(或tab)中,刷新頁面或進入同源的不同頁面,數(shù)據(jù)始終存在。也就是說只要這個瀏覽器窗口沒有關(guān)閉,加載新頁面或重新加載,數(shù)據(jù)仍然存 在。
cookie,容量4kb,默認各種瀏覽器都支持,缺陷就是每次請求,瀏覽器都會把本機存的cookies發(fā)送到服務(wù)器,無形中浪費帶寬。userdata,只有ie支持,單個容量64kb,每個域名最多可存10個共計640k數(shù)據(jù)。默認保存在C:\Documents and Settings\Administrator\UserData\目錄下,保存格式為xml。關(guān)于userdata更多資料參考http://msdn.microsoft.com/library/default.asp?url=/workshop/author/behaviors/reference/behaviors/userdata.asp
sessionStorage與localStorage
Web Storage實際上由兩部分組成:sessionStorage與localStorage。
sessionStorage用于本地存儲一個會話(session)中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。
localStorage用于持久化的本地存儲,除非主動刪除數(shù)據(jù),否則數(shù)據(jù)是永遠不會過期的。
為什么選擇Web Storage而不是Cookie?
與Cookie相比,Web Storage存在不少的優(yōu)勢,概括為以下幾點:
- 存儲空間更大:IE8下每個獨立的存儲空間為10M,其他瀏覽器實現(xiàn)略有不同,但都比Cookie要大很多。
- 存儲內(nèi)容不會發(fā)送到服務(wù)器:當(dāng)設(shè)置了Cookie后,Cookie的內(nèi)容會隨著請求一并發(fā)送的服務(wù)器,這對于本地存儲的數(shù)據(jù)是一種帶寬浪費。而Web Storage中的數(shù)據(jù)則僅僅是存在本地,不會與服務(wù)器發(fā)生任何交互。
- 更多豐富易用的接口:Web Storage提供了一套更為豐富的接口,使得數(shù)據(jù)操作更為簡便。
- 獨立的存儲空間:每個域(包括子域)有獨立的存儲空間,各個存儲空間是完全獨立的,因此不會造成數(shù)據(jù)混亂。
兼容性如何?
接下來的各種測試是在以下瀏覽器中進行的:IE8、Firefox3.6、Chrome5、Safari4、Opera10,事實證明各個瀏覽器在API方面的實現(xiàn)基本上一致,存在一定的兼容性問題,但不影響正常的使用。