隨著網際網路的快速發展,基於網頁的應用越來越普遍,同時也變的越來越複雜,為了滿足各種各樣的需求,會經常性在本地儲存大量的資料,傳統方式我們以
document.cookie來進行儲存的,但是由於其儲存大小只有4k左右,並且解析也相當的複雜,每一次傳送請求都會攜帶上cookie,會造成頻寬的浪費,給開發帶來諸多不便,html5規範則提出解決方案。
web儲存的含義是將資料儲存到使用者的電腦上,這樣可以緩解伺服器的壓力,並且提高體驗。
1 特性
1、設定、讀取方便。
2、容量較大,sessionstorage約5m、localstorage約20m。
3、只能儲存字串,可以將物件json.stringify() 編碼後儲存。
2 window.sessionstorage
1、生命週期為關閉當前頁面視窗。
補充:通過跳轉可以 。
運用場景:
1、頁面跳轉的時候可以通過session實現資料共享。
2、在一些單頁面(spa)的運用中,進行頁面傳值的時候比較有用。
3 window.localstorage
1、永久生效,除非手動刪除或用**刪除。
2、可以
多視窗共享(同源策略)。
運用場景:一些不涉及到安全的一些資料(不要太過龐大)都可以儲存到本地。
4 方法詳解
setitem(key, value) 設定儲存內容
window.localstorage/sessionstorage.setitem(key,value);
getitem(key) 讀取儲存內容
window.localstorage/sessionstorage.getitem(key,value);
removeitem(key) 刪除鍵值為key的儲存內容
window.localstorage/sessionstorage.removeitem(key,value);
clear() 清空所有儲存內容
window.localstorage/sessionstorage.empty();
key(n)
以索引值來獲取鍵名
window.localstorage/sessionstorage.key(n);
length 儲存的資料的個數
window.localstorage/sessionstorage.length;
區別:
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端,並且都是同源。
不同點: (
1)cookie 只有4k 小 並且每一次請求都會帶上cookie 體驗不好,浪費頻寬。 (
2)session和local直接儲存在本地,請求不會攜帶,並且容量比cookie要大的多。 (
3)session 是臨時會話,當視窗被關閉的時候就清除掉 ,而 local永久存在,cookie有過期時間。 (
4)cookie 和local都可以支援多視窗共享,而session不支援多視窗共享 但是都支援a鏈結跳轉的新視窗。
想要學習前端開發的同學,可以**:
543627393 學習哦!
web本地儲存
localstorage sessionstorage localstorage 長期儲存 資料依然會一直存在 手動清除 1.儲存資料到本地 sessionstorage.setitem email gengwenx yeah.net localstorage.setitem email gengw...
web 本地儲存
說明 對瀏覽器來說,使用 web storage 儲存鍵值對比儲存 cookie 方式更直觀,而且容量更大,它包含兩種 localstorage 和 sessionstorage localstorage 長期儲存 與 sessionstorage 一樣,但是瀏覽器關閉後,資料依然會一直存在 api...
web本地儲存
web storage是html5裡面引入的乙個類似於cookie的本地儲存功能,可以用於客戶端的本地儲存,其相對於cookie來說有以下幾點優勢 可選擇性強 語法非常簡單 儲存資料 localstorage.setitem key,value sessionstorage.setitem key,...