在頁面中有時需要將數(shù)據(jù)緩存到本地,提高用戶體驗度,筆者在此聊一聊本地緩存主要方法以及它們的區(qū)別。本地緩存主要是localStorage、sessionStorage、cookie三種方式。它們的含義與區(qū)別如下:
localStorage:是永久存儲,它是一種會一直將數(shù)據(jù)存儲在客戶端的儲存方式,即使用戶關(guān)閉了當(dāng)前頁面或者說瀏覽器,再下次打開的時候仍然可以看到之前存儲的未主動清楚的數(shù)據(jù)。
sessionStorage:是臨時的會話存儲,顧名思義它是一種只要當(dāng)前的會話窗口未關(guān)閉,不會隨頁面刷新,或者在編輯器中更改了代碼,而丟失存儲的信息的方式。
cookie:是服務(wù)器發(fā)送到用戶瀏覽器并保存在本地的一小塊數(shù)據(jù),它會在瀏覽器下次向同一服務(wù)器再發(fā)起請求時被攜帶并發(fā)送到服務(wù)器上。
它們之間的區(qū)別有以下幾點:
1. 存儲大小上:cookie存儲的大小一般不能超過4k,localStorage& sessionStorage 雖然也有存儲大小的限制,但比 cookie大得多,可以達到5M或更大。
2. 存儲時間上:cookie是設(shè)置 cookie 的有效期之前,是一直生效的,與瀏覽器頁面是否關(guān)閉無關(guān)。localStorage如果不手動清除數(shù)據(jù),數(shù)據(jù)永久有效,除非,sessionStorage數(shù)據(jù)在瀏覽器關(guān)閉之后自動清空。
3.作用域上:cookie&localStorage在所有同源窗口中數(shù)據(jù)共享,sessionStorage 不在不同的瀏覽器窗口中共享,即使是同一個頁面