千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時隨地免費學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > cookies,sessionStorage和localStorage的區(qū)別?

cookies,sessionStorage和localStorage的區(qū)別?

來源:千鋒教育
發(fā)布人:xqq
時間: 2023-10-12 20:28:35 1697113715

1、存儲的時間有效期不同

cookie的有效期是可以設(shè)置的,默認(rèn)的情況下是關(guān)閉瀏覽器后失效。sessionStorage的有效期是僅保持在當(dāng)前頁面,關(guān)閉當(dāng)前會話頁或者瀏覽器后就會失效。localStorage的有效期是在不進行手動刪除的情況下是一直有效的。

2、存儲的大小不同

cookie的存儲是4kb左右,存儲量較小,一般頁面非常多存儲20條左右信息。localStorage和sessionStorage的存儲容量是5Mb(官方介紹,可能和瀏覽器有部分差異性)。

3、與服務(wù)端的通信不同

cookie會參與到與服務(wù)端的通信中,一般會攜帶在http請求的頭部中,例如一些關(guān)鍵密匙驗證等。localStorage和sessionStorage是單純的前端存儲,不參與與服務(wù)端的通信。

4、讀寫操作的便捷程度不同

cookie的相關(guān)操作:

cookie操作起來較為繁瑣,并且部分?jǐn)?shù)據(jù)不可以讀取操作。

cookie的創(chuàng)建(修改和創(chuàng)建相同,創(chuàng)建同樣名稱會覆蓋之前的):

//JavaScript 中,創(chuàng)建 cookie 如下所示:document.cookie="username=John Doe";//您還可以為 cookie 添加一個過期時間(以 UTC 或 GMT 時間)。默認(rèn)情況下,cookie 在瀏覽器關(guān)閉時刪除:document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";//您可以使用 path 參數(shù)告訴瀏覽器 cookie 的路徑。默認(rèn)情況下,cookie 屬于當(dāng)前頁面。document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

cookie的讀取:

var x = document.cookie;

cookie的刪除:

//刪除 cookie 非常簡單。您只需要設(shè)置 expires 參數(shù)為以前的時間即可,如下所示,設(shè)置為 Thu, 01 Jan 1970 00:00:00 GMT:document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

sessionStorage的相關(guān)操作:

存儲一條數(shù)據(jù):

sessionStorage.setItem('數(shù)據(jù)名', '數(shù)據(jù)值');

讀取一條數(shù)據(jù):

let data = sessionStorage.getItem('數(shù)據(jù)名');

清除一條數(shù)據(jù):

sessionStorage.removeItem('數(shù)據(jù)名');

移除所有數(shù)據(jù):

sessionStorage.clear();

localStorage的相關(guān)操作:

存儲一條數(shù)據(jù):

localStorage.setItem('數(shù)據(jù)名', '數(shù)據(jù)值');

讀取一條數(shù)據(jù):

let data = localStorage.getItem('數(shù)據(jù)名');

清除一條數(shù)據(jù):

localStorage.removeItem('數(shù)據(jù)名');

移除所有數(shù)據(jù):

localStorage.clear();

5、對于瀏覽器的支持不同

cookie出現(xiàn)的時間較早,目前見到的瀏覽器都支持。localStorage和sessionStorage出現(xiàn)的時間較晚,對于版本較低的瀏覽器不支持(比如IE8版本以下的都不支持)。

6、作用域不同

cookie:cookie在瀏覽器和服務(wù)器之間來回傳遞,如果使用cookie保存過多數(shù)據(jù)會造成性能問題。sessionStorage:僅在客戶端(瀏覽器)中保存,不參與服務(wù)器的通信。localStorage:僅在客戶端(瀏覽器)中保存,不參與服務(wù)器的通信。

7、應(yīng)用場景不同

cookie:判斷用戶是否登錄過網(wǎng)站,以便實現(xiàn)下次自動登錄或記住密碼;保存事件信息。sessionStorage:敏感賬號一次性登錄,單頁面用的較多。localStorage:用于長期登錄,適于長期保存在本地的數(shù)據(jù)。

延伸閱讀1:Cookie的主要構(gòu)成

namevaluedomainpathexpiresmax-ageHttpOnlysecure
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
想開發(fā)一款直播交友APP需要有哪些功能?

一、想開發(fā)一款直播交友APP需要的功能 1、直播功能:用戶可以選擇視頻一對一直播和語音一對一直播兩種方式,觀眾需要支付直播費用,直播費用由...詳情>>

2023-10-12 21:47:55
物聯(lián)網(wǎng)云平臺用什么數(shù)據(jù)庫?

一、物聯(lián)網(wǎng)云平臺的數(shù)據(jù)庫1、關(guān)系型數(shù)據(jù)庫(RDBMS)例如MySQL、PostgreSQL、Oracle等。關(guān)系型數(shù)據(jù)庫以表格的形式存儲數(shù)據(jù),并使用SQL(Structur...詳情>>

2023-10-12 21:41:25
ACTION_CANCEL到底何時觸發(fā),滑出子View范圍會發(fā)生什么?

一、ACTION_CANCEL在這些時候會觸發(fā)1、父view攔截事件首先要了解ViewGroup什么情況下會攔截事件,請看下面一段代碼:@Overridepublic boolean d...詳情>>

2023-10-12 21:31:42
設(shè)計移動端表單有哪些注意事項?

1、分布式表單iPhone目前主要的機型屏幕尺寸在4.7-5.8英寸,android的尺寸更多一些,但是總體上來說,移動端的載體手機屏幕不大,能承載的信息...詳情>>

2023-10-12 20:59:19
數(shù)據(jù)庫應(yīng)該怎么設(shè)計比較好?

一、數(shù)據(jù)庫的設(shè)計方法1、需求分析在設(shè)計數(shù)據(jù)庫之前,仔細(xì)分析和理解業(yè)務(wù)需求。了解數(shù)據(jù)的類型、關(guān)系和操作模式,明確數(shù)據(jù)的目標(biāo)和用途。與相關(guān)...詳情>>

2023-10-12 20:44:36
久久亚洲中文字幕精品一区四,亚洲日本另类欧美一区二区,久久久久久久这里只有免费费精品,高清国产激情视频在线观看
天堂精品视频一区二区 | 中文字幕级片在线播放 | 亚洲国产综合视频 | 亚洲国产福利精品 | 伊人成国产中国 | 中文字幕精品一区二区有码 |