JavaScript本地儲(chǔ)存:localStorage、sessionStorage、cookie的使用
javaScript有三種數(shù)據(jù)存儲(chǔ)方式,分別是:
- sessionStorage
- localStorage
- cookier
1. sessionStorage
- sessionStorage僅在當(dāng)前會(huì)話下有效,關(guān)閉頁面或?yàn)g覽器后被清除;
- setItem(key,value) 設(shè)置數(shù)據(jù)
- getItem(key) 獲取數(shù)據(jù)
- removeItem(key) 移除數(shù)據(jù)
- clear() 清除所有值
<script> // 添加數(shù)據(jù) window.sessionStorage.setItem("name","李四") window.sessionStorage.setItem("age",18) // 獲取數(shù)據(jù) console.log(window.sessionStorage.getItem("name")) // 李四 // 清除某個(gè)數(shù)據(jù) window.sessionStorage.removeItem("gender") // 清空所有數(shù)據(jù) window.sessionStorage.clear() </script>
2. localStorage
- localStorage 是 HTML5 標(biāo)準(zhǔn)中新加入的技術(shù),用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時(shí)間,直到手動(dòng)去刪除;
- localStorage和sessionStorage最大一般為5MB,僅在客戶端(即瀏覽器)中保存,不參與和服務(wù)器的通信;
- setItem(key,value) 設(shè)置數(shù)據(jù)
- getItem(key) 獲取數(shù)據(jù)
- removeItem(key) 移除數(shù)據(jù)
- clear() 清除所有值
<script> // 添加數(shù)據(jù) window.localStorage.setItem("name","張三") window.localStorage.setItem("age",20) window.localStorage.setItem("gender","男") // 獲取數(shù)據(jù) console.log(window.localStorage.getItem("name")) // 張三 // 清除某個(gè)數(shù)據(jù) window.localStorage.removeItem("gender") // 清空所有數(shù)據(jù) window.localStorage.clear() </script>
3. cookier
簡(jiǎn)介
Cookie 是一些數(shù)據(jù), 存儲(chǔ)于你電腦上的文本文件中,用于存儲(chǔ) web 頁面的用戶信息
Cookie 數(shù)據(jù)是以鍵值對(duì)的形式存在的,每個(gè)鍵值對(duì)都有過期時(shí)間。如果不設(shè)置時(shí)間,瀏覽器關(guān)閉,cookie就會(huì)消失,當(dāng)然用戶也可以手動(dòng)清除cookie
Cookie每次都會(huì)攜帶在HTTP頭中,如果使用cookie保存過多數(shù)據(jù)會(huì)帶來性能問題
Cookie內(nèi)存大小受限,一般每個(gè)域名下是4K左右,每個(gè)域名大概能存儲(chǔ)50個(gè)鍵值對(duì)
基本操作
通過訪問document.cookie可以對(duì)cookie進(jìn)行創(chuàng)建,修改與獲取。
默認(rèn)情況下,cookie 在瀏覽器關(guān)閉時(shí)刪除,你還可以為 cookie的某個(gè)鍵值對(duì) 添加一個(gè)過期時(shí)間
如果設(shè)置新的cookie時(shí),某個(gè)key已經(jīng)存在,則會(huì)更新這個(gè)key對(duì)應(yīng)的值,否則他們會(huì)同時(shí)存在cookie中
<script> // 設(shè)置cookie document.cookie = "username=orochiz" document.cookie = "age=20" // 讀取cookie var msg = document.cookie console.log(msg) // username=orochiz; age=20 // 添加過期時(shí)間(單位:天) var d = new Date() // 當(dāng)前時(shí)間 2019-9-25 var days = 3 // 3天 d.setDate(d.getDate() + days) document.cookie = "username=orochiz;"+"expires="+d // 刪除cookie (給某個(gè)鍵值對(duì)設(shè)置過期的時(shí)間) d.setDate(d.getDate() - 1) console.log(document.cookie) </script>
總結(jié)
相同點(diǎn):都保存在瀏覽器端,可以下圖位置查看儲(chǔ)存的信息
不同點(diǎn):
①傳遞方式不同
cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶(即使不需要),即cookie在瀏覽器和服務(wù)器間來回傳遞。
sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器,僅在本地保存。
②數(shù)據(jù)大小不同
cookie數(shù)據(jù)還有路徑(path)的概念,可以限制cookie只屬于某個(gè)路徑下。
存儲(chǔ)大小限制也不同,cookie數(shù)據(jù)不能超過4k,同時(shí)因?yàn)槊看蝖ttp請(qǐng)求都會(huì)攜帶cookie,所以cookie只適合保存很小的數(shù)據(jù),如會(huì)話標(biāo)識(shí)。
sessionStorage和localStorage 雖然也有存儲(chǔ)大小的限制,但比cookie大得多,可以達(dá)到5M或更大。
③數(shù)據(jù)有效期不同
sessionStorage:僅在當(dāng)前瀏覽器窗口關(guān)閉前有效,自然也就不可能持久保持;
localStorage:始終有效,窗口或?yàn)g覽器關(guān)閉也一直保存,因此用作持久數(shù)據(jù);
cookie只在設(shè)置的cookie過期時(shí)間之前一直有效,即使窗口或?yàn)g覽器關(guān)閉。
④作用域不同
sessionStorage不在不同的瀏覽器窗口中共享,即使是同一個(gè)頁面;
localStorage 在所有同源窗口中都是共享的;
cookie也是在所有同源窗口中都是共享的。
Web Storage 支持事件通知機(jī)制,可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。
Web Storage 的 api 接口使用更方便。
到此這篇關(guān)于JavaScript本地儲(chǔ)存:localStorage、sessionStorage、cookie的使用的文章就介紹到這了,更多相關(guān)JavaScript本地儲(chǔ)存內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript自定義超時(shí)API代碼實(shí)例
這篇文章主要介紹了JavaScript自定義超時(shí)API代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04Flutter自適用高度PageView的實(shí)現(xiàn)方案
在?Flutter?中,PageView?是一個(gè)非常常用的組件,能夠?qū)崿F(xiàn)多個(gè)頁面的滑動(dòng)切換,這篇文章主要介紹了Flutter-自適用高度PageView,需要的朋友可以參考下2024-08-08用JS實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證功能
這篇文章主要介紹了用JS實(shí)現(xiàn)簡(jiǎn)單的登錄驗(yàn)證功能,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的的朋友參考下吧2017-07-07原生javascript實(shí)現(xiàn)圖片輪播切換效果
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)圖片輪播切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07Three.js?中的屏幕空間環(huán)境光遮蔽SSAO
這篇文章主要為大家介紹了Three.js?中屏幕空間環(huán)境光遮蔽SSAO的原理及實(shí)現(xiàn)解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04微信小程序?qū)崿F(xiàn)的一鍵復(fù)制功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的一鍵復(fù)制功能,結(jié)合實(shí)例形式分析了微信小程序wx.setClipboardData接口實(shí)現(xiàn)操作粘貼板進(jìn)行復(fù)制操作的相關(guān)使用技巧,需要的朋友可以參考下2019-04-04幾種設(shè)置表單元素中文本輸入框不可編輯的方法總結(jié)
這篇文章主要是對(duì)幾種設(shè)置表單元素中文本輸入框不可編輯的方法進(jìn)行了總結(jié)介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11