摘要:在所有同源窗口中都是共享的。始終有效,窗口或瀏覽器關(guān)閉也一直保存,除非手動刪除,因此用作持久數(shù)據(jù)。保存用戶臨時會話數(shù)據(jù)一旦關(guān)閉瀏覽器,所有數(shù)據(jù)都會消失。
朋友去面試了,回來問我一般頁面間傳參用什么方法,我說我一般用是三種1、QueryString 2、cookies 3、webStorage。
QueryString很簡單,就是在URL后面拼接參數(shù),但缺點是傳的值會顯示在瀏覽器的地址欄中且不能傳遞對象,只適用于傳遞簡單的且安全性要求不高的整數(shù)值。今天呢主要對比一下cookies和webStorage。
一、cookie的實現(xiàn)方法 cookies是存儲在用戶本地終端上的數(shù)據(jù),cookie數(shù)據(jù)還有路徑(path)的概念,可以限制cookie只屬于某個路徑下,而且還可以限制失效時間。 //寫cookie function writeCookie(name, value, hours, path) { var expire = ""; if (hours !== null) { expire = new Date((new Date()).getTime() + hours * 3600000); expire = "; expires=" + expire.toGMTString(); } path = path ? "; path=" + path : ""; document.cookie = name + "=" + encodeURIComponent(value) + expire + path; };
//讀取cookie tools.readCookie = function (name) { var cookieValue = ""; var search = name + "="; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search); if (offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; cookieValue = decodeURIComponent(document.cookie.substring(offset, end)); } } return cookieValue; };
二、web Storage
html5中的Web Storage包括了兩種存儲方式:sessionStorage和localStorage。
注:storage只能存儲字符串的數(shù)據(jù),對于JS中常用的數(shù)組或?qū)ο髤s不能直接存儲。
兩者的實現(xiàn)方法相同。
1、.setItem( key, value)存儲value,將value存儲到key字段:
sessionStorage.setItem("key", "test"); localStorage.setItem("site", "segmentFault");
2、.getItem(key)獲取value,獲取指定key本地存儲的值
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
3、.removeItem(key)刪除key,刪除指定key本地存儲的值
sessionStorage.removeItem("key"); localStorage.removeItem("site");
4、.clear()清除所有的key/value
sessionStorage.clear(); localStorage.clear();
上面說了一堆的實現(xiàn)方法,現(xiàn)在可以說說它們的區(qū)別了。
共同點:
它們都是保存在瀏覽器端,且同源的。
區(qū)別:
1、cookies
(1)ookie數(shù)據(jù)始終在同源的http請求中攜帶,即cookie在瀏覽器和服務(wù)器間來回傳遞;
(2)cookie數(shù)據(jù)路徑(path)的概念,可以限制cookie只屬于某個路徑下。
(3)存儲大小限制也不同,cookie數(shù)據(jù)不能超過4k,同時因為每次http請求都會攜帶cookie,所以cookie只適合保存很小的數(shù)據(jù)。
(4)cookie只在設(shè)置的cookie過期時間之前一直有效,即使窗口或瀏覽器關(guān)閉。
(5)cookie也是在所有同源窗口中都是共享的。
Web Storage不需要通過瀏覽器的請求將數(shù)據(jù)傳給服務(wù)器,因此相比cookie來說能夠存儲更多的數(shù)據(jù),大概5M左右。
2、LocalStorage
(1)localStorage 在所有同源窗口中都是共享的。
(2)始終有效,窗口或瀏覽器關(guān)閉也一直保存,除非手動刪除,因此用作持久數(shù)據(jù)。
3、sessionStorage
(1)保存用戶臨時會話數(shù)據(jù),一旦關(guān)閉瀏覽器,所有數(shù)據(jù)都會消失。
(2)sessionStorage不在不同瀏覽器窗口中共享
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/91242.html
摘要:源自阮一峰具體什么意思,請看下面的截圖就一目了然表示對象的的數(shù)量實戰(zhàn)網(wǎng)站名網(wǎng)站地址確認(rèn)網(wǎng)站名查詢機制原意是小甜餅,是服務(wù)器保存在瀏覽器的一小段文本信息,屬于其中一種互聯(lián)網(wǎng)存儲機制。 目錄 1. Web Storage 2. Cookie機制 3. 二者的聯(lián)系與區(qū)別 1.Web Storage 1.1 概述 Web Storage是HTML5提供的一種新的瀏覽器端數(shù)據(jù)儲存機制,它提供兩...
摘要:和雖然也有存儲大小的限制,但比大得多,可以達(dá)到或更大支持事件通知機制,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。有時也用,指某些網(wǎng)站為了辨別用戶身份,進(jìn)行跟蹤而存儲在本地終端上的數(shù)據(jù),通常經(jīng)過加密。 Web Storage介紹 Web Storage帶來的好處 減少網(wǎng)絡(luò)流量:一旦數(shù)據(jù)保存在本地后,就可以避免再向服務(wù)器請求數(shù)據(jù),因此減少不必要的數(shù)據(jù)請求,減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳...
摘要:和雖然也有存儲大小的限制,但比大得多,可以達(dá)到或更大支持事件通知機制,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。有時也用,指某些網(wǎng)站為了辨別用戶身份,進(jìn)行跟蹤而存儲在本地終端上的數(shù)據(jù),通常經(jīng)過加密。 Web Storage介紹 Web Storage帶來的好處 減少網(wǎng)絡(luò)流量:一旦數(shù)據(jù)保存在本地后,就可以避免再向服務(wù)器請求數(shù)據(jù),因此減少不必要的數(shù)據(jù)請求,減少數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳...
摘要:是客戶端用來存儲數(shù)據(jù)的它既可以在客戶端設(shè)置也可以在服務(wù)器端設(shè)置。會跟隨任意請求一起發(fā)送標(biāo)準(zhǔn)中的包括了兩種存儲方式和用于本地存儲一個會話中的數(shù)據(jù),這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。 Cookie cookie是客戶端用來存儲數(shù)據(jù)的,它既可以在客戶端設(shè)置也可以在服務(wù)器端設(shè)置。cookie會跟隨任意HTTP請求一起發(fā)送 Web Storage htm...
閱讀 2638·2021-11-18 10:02
閱讀 2289·2021-09-30 09:47
閱讀 1808·2021-09-27 14:01
閱讀 3120·2021-08-16 11:00
閱讀 3173·2019-08-30 11:06
閱讀 2404·2019-08-29 17:29
閱讀 1543·2019-08-29 13:19
閱讀 453·2019-08-26 13:54