sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,能夠方便的在web請求之間保存數據。有了本地數據,就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。web
sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據,其中sessionStorage的概念很特別,引入了一個「瀏覽器窗口」的概念。sessionStorage是在同源的同學口(或tab)中,始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉,即便刷新頁面或進入同源另外一頁面,數據仍然存在。關閉窗口後,sessionStorage即被銷燬。同時「獨立」打開的不一樣窗口,即便是同一頁面,sessionStorage對象也是不一樣的。
Web Storage帶來的好處:
- 減小網絡流量:一旦數據保存在本地後,就能夠避免再向服務器請求數據,所以減小沒必要要的數據請求,減小數據在瀏覽器和服務器間沒必要要地來回傳遞。
- 快速顯示數據:性能好,從本地讀數據比經過網絡從服務器得到數據快得多,本地數據能夠即時得到。再加上網頁自己也能夠有緩存,所以整個頁面和數據都在本地的話,能夠當即顯示。
- 臨時存儲:不少時候數據只須要在用戶瀏覽一組頁面期間使用,關閉窗口後數據就能夠丟棄了,這種狀況使用sessionStorage很是方便。
瀏覽器本地存儲與服務器端存儲之間的區別
其實數據既能夠在瀏覽器本地存儲,也能夠在服務器端存儲。
瀏覽器端能夠保存一些數據,須要的時候直接從本地獲取,sessionStorage、localStorage和cookie都由瀏覽器存儲在本地的數據。
服務器端也能夠保存全部用戶的全部數據,但須要的時候瀏覽器要向服務器請求數據。
1.服務器端能夠保存用戶的持久數據,如數據庫和雲存儲將用戶的大量數據保存在服務器端。
2.服務器端也能夠保存用戶的臨時會話數據。服務器端的session機制,如jsp的 session 對象,數據保存在服務器上。實現上,服務器和瀏覽器之間僅需傳遞session id便可,服務器根據session id找到對應用戶的session對象。會話數據僅在一段時間內有效,這個時間就是server端設置的session有效期。
服務器端保存全部的用戶的數據,因此服務器端的開銷較大,而瀏覽器端保存則把不一樣用戶須要的數據分佈保存在用戶各自的瀏覽器中。
瀏覽器端通常只用來存儲小數據,而服務器能夠存儲大數據或小數據。
服務器存儲數據安全一些,瀏覽器只適合存儲通常數據。
sessionStorage 、localStorage 和 cookie 之間的區別
共同點:都是保存在瀏覽器端,且同源的。
區別:
- cookie數據始終在同源的http請求中攜帶(即便不須要),即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器,僅在本地保存。cookie數據還有路徑(path)的概念,能夠限制cookie只屬於某個路徑下。
- 存儲大小限制也不一樣,cookie數據不能超過4k,同時由於每次http請求都會攜帶cookie,因此cookie只適合保存很小的數據,如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制,但比cookie大得多,能夠達到5M或更大。
- 數據有效期不一樣,sessionStorage:僅在當前瀏覽器窗口關閉前有效,天然也就不可能持久保持;localStorage:始終有效,窗口或瀏覽器關閉也一直保存,所以用做持久數據;cookie只在設置的cookie過時時間以前一直有效,即便窗口或瀏覽器關閉。
- 做用域不一樣,sessionStorage不在不一樣的瀏覽器窗口中共享,即便是同一個頁面;localStorage 在全部同源窗口中都是共享的;cookie也是在全部同源窗口中都是共享的。
- Web Storage 支持事件通知機制,能夠將數據更新的通知發送給監聽者。
- Web Storage 的 api 接口使用更方便。
sessionStorage
和
localStorage 之間的區別
見上面的區別三、4
sessionStorage與頁面 js 數據對象的區別
頁面中通常的 js 對象或數據的生存期是僅在當前頁面有效,所以刷新頁面或轉到另外一頁面這樣的從新加載頁面的狀況,數據就不存在了。
而sessionStorage 只要同源的同學口(或tab)中,刷新頁面或進入同源的不一樣頁面,數據始終存在。也就是說只要這個瀏覽器窗口沒有關閉,加載新頁面或從新加載,數據仍然存在。