localStorage,sessionStorage和cookie的區別

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在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 介面使用更方便。

localStorage,sessionStorage和cookie的區別