請描述一下 cookies，sessionStorage 和 localStorage 的差別？

• 請描述一下 cookies，sessionStorage 和 localStorage 的差別？

sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以友善的在web請求之間儲存資料。有了本地資料，就可以避免資料在浏覽器和伺服器間不必要地來回傳遞。

sessionStorage、localStorage、cookie都是在浏覽器端存儲的資料，其中sessionStorage的概念很特别，引入了一個“浏覽器視窗”的概念。sessionStorage是在同源的同視窗（或tab）中，始終存在的資料。也就是說隻要這個浏覽器視窗沒有關閉，即使重新整理頁面或進入同源另一頁面，資料仍然存在。關閉視窗後，sessionStorage即被銷毀。同時“獨立”打開的不同視窗，即使是同一頁面，sessionStorage對象也是不同的。

Web Storage帶來的好處：

1. 減少網絡流量：一旦資料儲存在本地後，就可以避免再向伺服器請求資料，是以減少不必要的資料請求，減少資料在浏覽器和伺服器間不必要地來回傳遞。
2. 快速顯示資料：性能好，從本地讀資料比通過網絡從伺服器獲得資料快得多，本地資料可以即時獲得。再加上網頁本身也可以有緩存，是以整個頁面和資料都在本地的話，可以立即顯示。
3. 臨時存儲：很多時候資料隻需要在使用者浏覽一組頁面期間使用，關閉視窗後資料就可以丢棄了，這種情況使用sessionStorage非常友善。

浏覽器本地存儲與伺服器端存儲之間的差別

其實資料既可以在浏覽器本地存儲，也可以在伺服器端存儲。

浏覽器端可以儲存一些資料，需要的時候直接從本地擷取，sessionStorage、localStorage和cookie都由浏覽器存儲在本地的資料。

伺服器端也可以儲存所有使用者的所有資料，但需要的時候浏覽器要向伺服器請求資料。

1.伺服器端可以儲存使用者的持久資料，如資料庫和雲存儲将使用者的大量資料儲存在伺服器端。

2.伺服器端也可以儲存使用者的臨時會話資料。伺服器端的session機制，如jsp的 session 對象，資料儲存在伺服器上。實作上，伺服器和浏覽器之間僅需傳遞session id即可，伺服器根據session id找到對應使用者的session對象。會話資料僅在一段時間内有效，這個時間就是server端設定的session有效期。

伺服器端儲存所有的使用者的資料，是以伺服器端的開銷較大，而浏覽器端儲存則把不同使用者需要的資料分布儲存在使用者各自的浏覽器中。

浏覽器端一般隻用來存儲小資料，而伺服器可以存儲大資料或小資料。

伺服器存儲資料安全一些，浏覽器隻适合存儲一般資料。

sessionStorage 、localStorage 和 cookie 之間的差別

共同點：都是儲存在浏覽器端，且同源的。

差別：

1. cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在浏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。cookie資料還有路徑（path）的概念，可以限制cookie隻屬于某個路徑下。
2. 存儲大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，是以cookie隻适合儲存很小的資料，如會話辨別。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
3. 資料有效期不同，sessionStorage：僅在目前浏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或浏覽器關閉也一直儲存，是以用作持久資料；cookie隻在設定的cookie過期時間之前一直有效，即使視窗或浏覽器關閉。
4. 作用域不同，sessionStorage不在不同的浏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。
5. Web Storage 支援事件通知機制，可以将資料更新的通知發送給監聽者。
6. Web Storage 的 api 接口使用更友善。

sessionStorage 和 localStorage 之間的差別

見上面的差別3、4

sessionStorage與頁面 js 資料對象的差別

頁面中一般的 js 對象或資料的生存期是僅在目前頁面有效，是以重新整理頁面或轉到另一頁面這樣的重新加載頁面的情況，資料就不存在了。

而sessionStorage 隻要同源的同視窗（或tab）中，重新整理頁面或進入同源的不同頁面，資料始終存在。也就是說隻要這個浏覽器視窗沒有關閉，加載新頁面或重新加載，資料仍然存在。

​