請描述一下 cookies,sessionStorage 和 localStorage 的區別?
阿新 • • 發佈:2019-02-14
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web請求之間儲存資料。有了本地資料,就可以避免資料在瀏覽器和伺服器間不必要地來回傳遞。sessionStorage、localStorage、cookie都是在瀏覽器端儲存的資料,其中sessionStorage的概念很特別,引入了一個“瀏覽器視窗”的概念。sessionStorage是在同源的同窗口(或tab)中,始終存在的資料。也就是說只要這個瀏覽器視窗沒有關閉,即使重新整理頁面或進入同源另一頁面,資料仍然存在。關閉視窗後,sessionStorage即被銷燬。同時“獨立”開啟的不同視窗,即使是同一頁面,sessionStorage物件也是不同的。 Web Storage帶來的好處: 儲存所有的使用者的資料,所以伺服器端的開銷較大,而瀏覽器端儲存則把不同使用者需要的資料分佈儲存在使用者各自的瀏覽器中。瀏覽器端一般只用來儲存小資料,而伺服器可以儲存大資料或小資料。伺服器儲存資料安全一些,瀏覽器只適合儲存一般資料。sessionStorage 、localStorage 和 cookie 之間的區別
共同點:都是儲存在瀏覽器端,且同源的。區別:
頁面中一般的 js 物件或資料的生存期是僅在當前頁面有效,因此重新整理頁面或轉到另一頁面這樣的重新載入頁面的情況,資料就不存在了。而sessionStorage 只要同源的同窗口(或tab)中,重新整理頁面或進入同源的不同頁面,資料始終存在。也就是說只要這個瀏覽器視窗沒有關閉,載入新頁面或重新載入,資料仍然存在。
- 減少網路流量:一旦資料儲存在本地後,就可以避免再向伺服器請求資料,因此減少不必要的資料請求,減少資料在瀏覽器和伺服器間不必要地來回傳遞。
- 快速顯示資料:效能好,從本地讀資料比通過網路從伺服器獲得資料快得多,本地資料可以即時獲得。再加上網頁本身也可以有快取,因此整個頁面和資料都在本地的話,可以立即顯示。
- 臨時儲存:很多時候資料只需要在使用者瀏覽一組頁面期間使用,關閉視窗後資料就可以丟棄了,這種情況使用sessionStorage非常方便。
共同點:都是儲存在瀏覽器端,且同源的。區別:
- 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 介面使用更方便。
頁面中一般的 js 物件或資料的生存期是僅在當前頁面有效,因此重新整理頁面或轉到另一頁面這樣的重新載入頁面的情況,資料就不存在了。而sessionStorage 只要同源的同窗口(或tab)中,重新整理頁面或進入同源的不同頁面,資料始終存在。也就是說只要這個瀏覽器視窗沒有關閉,載入新頁面或重新載入,資料仍然存在。