前端做本地數據存儲的三種方式


當網頁要發http請求時,瀏覽器會先檢查是否有相應的cookie,有則自動添加在request header中的cookie字段中。這些是瀏覽器自動幫我們做的,而且每一次http請求瀏覽器都會自動幫我們做。這個特點很重要,因為這關系到“什么樣的數據適合存儲在cookie中”。

存儲在cookie中的數據,每次都會被瀏覽器自動放在http請求中,如果這些數據並不是每個請求都需要發給服務端的數據,瀏覽器這設置自動處理無疑增加了網絡開銷;但如果這些數據是每個請求都需要發給服務端的數據(比如身份認證信息),瀏覽器這設置自動處理就大大免去了重復添加操作。所以對於那種設置“每次請求都要攜帶的信息(最典型的就是身份認證信息)”就特別適合放在cookie中,其他類型的數據就不適合了。

特征

1.不同的瀏覽器存放的cookie位置不一樣,也是不能通用的。
2.每個cookie存放的內容大小也是有限制的,不同的瀏覽器存放大小不一樣,一般為4KB。

localStorage(本地存儲)

1.數據存儲量大
2.不會被發送到服務端
3.持久化本地存儲,除非手動刪除,否則一直存在
4.在同一個域下,所有窗口共享其中存儲的數據

設置
localStorage.setItem('username','zxy');

獲取

localStorage.getItem('username');

刪除

localStorage.removeItem('username');

sessionStorage

用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據也隨之銷毀。
也就是說只要這個瀏覽器窗口沒有關閉,即使刷新頁面或進入同源另一頁面,數據仍然存在。關閉窗口后,sessionStorage即被銷毀

設置
sessionStorage.setItem( key, value ) 
獲取
sessionStorage.getItem( key ) 
刪除
sessionStorage.removeItem( key ) 
sessionStorage 的缺點

sessionStorage 中存儲的數據不會被自動隨着請求被發送到服務端,可存儲的數據大小相比 cookie 來說大了很多,但是每個瀏覽器都不同,所以沒有一個統一的值。其中所存儲的數據的生命周期與 session 類似,即只存在於一個會話周期內,當瀏覽器關閉或標簽頁關閉時,數據即會被刪除(前進和后退並不會影響到數據,因為還在當前的會話中),這就導致了即便是同一個網站,但在不同的標簽頁和窗口內,也無法共享其中存儲的數據

cookie,localStorage,sessionStorage區別

image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM