cookie 定義： 它會在用戶訪問服務器的時候被帶上。但是不要使用過量，因為cookie在每次請求的時候都會被帶上。你總不想每次訪問自己網站接口或者文件的時候都帶上一堆可能用不到的信息把？這樣會增大請求包的大小。 限制： cookie可以設置訪問域。即，如果你設置cookie的時候，設定了cookie的訪問域名為一個頂級域名，則可以達到幾個子域名共享cookie的效果。 存儲時間： 如果設定了cookie的超時時間的話，那么cookie將在到期的時候失效。如果沒有設定，那么cookie就是session級別的。cookie的session含義與sessionStorage的session含義有區別。cookie的session是，在未關閉瀏覽器的情況下，所有的tab級別的頁面或新開，或刷新，均屬于一個session，也就是說你在一個頁面種下cookie然后在打開一個新的頁面，會發現新的頁面也有cookie，關閉當前tab或者刷新都會存在，但是退出瀏覽器之后就不在了，證明cookie的session含義是在瀏覽器退出時才結束。 使用場景： ? ? 在存儲一些需要隨tab附帶的信息的時候，最常見的就是用戶登錄名和密碼。存儲一些同步訪問頁面的時候必須要被帶到服務端的信息。至于在頁面上一些其他操作的信息就沒必要存到cookie里了，例如購物車的東西之類的。可以存到數據庫里，然后通過cookie的ID進行查詢和調取。
? sessionStorage 定義： sessionStorage屬于webstorage的一種，sessionStorage與localStorage類似，可以存儲k-v形式的數據，通過set便可以存儲，通過sessionStorage.getItem進行獲取，也就是說sessionStorage，是session級別的存儲。其存儲于客戶端。服務端是無法直接拿到的。 訪問限制： sessionStorage的訪問限制更高一些，只有當前設定sessionStorage的域下才能訪問，而且不同的兩個tab之間不能互通。 存儲時間： 是以tab為單位的，伴隨著tab存在，如果tab關閉，那么sessionStorage也會隨之失效 使用場景： ? ? 最經典的就是音樂或者視頻播放器恢復進度條
? localStorage 定義： ?? ?localStorage與sessionStorage較為相似，接口也簡單，通過localStorage.setItem/localStorage.getItem即可使用。可以存儲k-v形式的數據。存儲的值需要是字符串類型，沒法直接存儲對象，但是可以將對象序列化為字符串再存入。localStorage的存儲周期比sessionStorage長，如果用戶不清理的話，是可以永久存儲的。
var yourName = {name: 'yourName',describe: '陽光、樂觀' }; localStorage.setItem('test', JSON.stringify(yourName)); JSON.parse(localStorage.getItem('test'));

?

訪問限制： ?? ?Storage雖然相似，但是訪問限制卻不盡相同，localStorage的訪問域默認設定為設置localStorage的當前域，其他域名不可以取。這點與sessionStorage相同，但是與sessionStorage不同的是，localStorage設定后，新開tab是可以訪問到的
? 存儲時間： ?? ?localStorage理論上講是永久性質的存儲。只要用戶不主動清除，那么就會一直存在
大小： ?? ?localStorage的大小一般限定為4M左右
使用場景： ?? ?由于localStorage的穩定性質，及其長效的存儲，可以幫助服務器分擔一些壓力
注意：　　 　IE9?localStorage不支持本地文件，需要將項目署到服務器，才可以支持！ 檢測方法：
if(window.localStorage){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); }

?

轉載于:https://www.cnblogs.com/wxtlinlin/p/6649593.html

總結

以上是生活随笔為你收集整理的简谈前端存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。