這篇文章主要介紹數(shù)據(jù)存儲中cookie sessionstorage localstorage的區(qū)別有哪些,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的盧氏網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
一、通常我們在存儲數(shù)據(jù)的方式有三種
cookie sessionstorage localstorage ,那么這三種數(shù)據(jù)的存儲又有什么關(guān)系呢?讓我們一起來看看吧
cookie:保存cookie值:
var dataCookie='110'; document.cookie = 'token' + "=" +dataCookie;
獲取指定名稱的cookie值
function getCookie(name) { //獲取指定名稱的cookie值 // (^| )name=([^;]*)(;|$),match[0]為與整個正則表達(dá)式匹配的字符串,match[i]為正則表達(dá)式捕獲數(shù)組相匹配的數(shù)組; var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); if(arr != null) { console.log(arr); return unescape(arr[2]); } return null; } var cookieData=getCookie('token'); //cookie賦值給變量。
設(shè)置cookie過期時間
function setTime() { //存儲cookie值并且設(shè)置cookie過期時間 var date\=new Date(); var expiresDays\=10;//設(shè)置十天過期 date.setTime(date.getTime()+expiresDays\*24\*3600\*1000); document.cookie\="userId=828; expires="+date.toGMTString(); console.log(document.cookie,'存儲cookie值并且設(shè)置cookie過期時間'); } setTime();
刪除cookie
function delCookie(cookieName1) { //刪除cookie var date2\=new Date(); date2.setTime(date2.getTime()\-10001);//把時間設(shè)置為過去的時間,會自動刪除 document.cookie\= cookieName1+"=v; expires="+date2.toGMTString(); console.log(document.cookie,'刪除cookie'); } delCookie('userId');
localStorage和sessionStorage:localStorage和sessionStorage所使用的方法是一樣的,下面以sessionStorage為栗子:
var name='sessionData'; var num=120; sessionStorage.setItem(name,num);//存儲數(shù)據(jù) sessionStorage.setItem('value2',119); let dataAll=sessionStorage.valueOf();//獲取全部數(shù)據(jù) console.log(dataAll,'獲取全部數(shù)據(jù)'); var dataSession=sessionStorage.getItem(name);//獲取指定鍵名數(shù)據(jù) var dataSession2=sessionStorage.sessionData;//sessionStorage是js對象,也可以使用key的方式來獲取值 console.log(dataSession,dataSession2,'獲取指定鍵名數(shù)據(jù)'); sessionStorage.removeItem(name); //刪除指定鍵名數(shù)據(jù) console.log(dataAll,'獲取全部數(shù)據(jù)1'); sessionStorage.clear();//清空緩存數(shù)據(jù):localStorage.clear(); console.log(dataAll,'獲取全部數(shù)據(jù)2');
三者的異同:
上面的使用方式說好了,下面就嘮嘮三者之間的區(qū)別,這個問題其實(shí)很多大廠面試的時候也都會問到,所以可以注意一下這幾個之間的區(qū)別。
生命周期:
cookie:可設(shè)置失效時間,沒有設(shè)置的話,默認(rèn)是關(guān)閉瀏覽器后失效
localStorage:除非被手動清除,否則將會永久保存。
sessionStorage: 僅在當(dāng)前網(wǎng)頁會話下有效,關(guān)閉頁面或?yàn)g覽器后就會被清除。
存放數(shù)據(jù)大?。?/p>
cookie:4KB左右
localStorage和sessionStorage:可以保存5MB的信息。
http請求:
cookie:每次都會攜帶在HTTP頭中,如果使用cookie保存過多數(shù)據(jù)會帶來性能問題
localStorage和sessionStorage:僅在客戶端(即瀏覽器)中保存,不參與和服務(wù)器的通信
易用性:
cookie:需要程序員自己封裝,源生的Cookie接口不友好
localStorage和sessionStorage:源生接口可以接受,亦可再次封裝來對Object和Array有更好的支持
應(yīng)用場景:
從安全性來說,因?yàn)槊看蝖ttp請求都會攜帶cookie信息,這樣無形中浪費(fèi)了帶寬,所以cookie應(yīng)該盡可能少的使用,另外cookie還需要指定作用域,不可以跨域調(diào)用,限制比較多。但是用來識別用戶登錄來說,cookie還是比stprage更好用的。其他情況下,可以使用storage,就用storage。
storage在存儲數(shù)據(jù)的大小上面秒殺了cookie,現(xiàn)在基本上很少使用cookie了,因?yàn)楦罂偸歉玫?,哈哈哈你們懂得?/p>
localStorage和sessionStorage唯一的差別一個是永久保存在瀏覽器里面,一個是關(guān)閉網(wǎng)頁就清除了信息。localStorage可以用來夸頁面?zhèn)鬟f參數(shù),sessionStorage用來保存一些臨時的數(shù)據(jù),防止用戶刷新頁面之后丟失了一些參數(shù)。
瀏覽器支持情況:
localStorage和sessionStorage是html5才應(yīng)用的新特性,可能有些瀏覽器并不支持,這里要注意。
cookie的瀏覽器支持沒有找到,可以通過下面這段代碼來判斷所使用的瀏覽器是否支持cookie:
if(navigator.cookieEnabled) { alert("你的瀏覽器支持cookie功能");//提示瀏覽器支持cookie } else { alert("你的瀏覽器不支持cookie");//提示瀏覽器不支持cookie }
數(shù)據(jù)存放處:Cookie、localStorage、sessionStorage數(shù)據(jù)存放處
以上是“數(shù)據(jù)存儲中cookie sessionstorage localstorage的區(qū)別有哪些”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
當(dāng)前標(biāo)題:數(shù)據(jù)存儲中cookiesessionstoragelocalstorage的區(qū)別有哪些
分享鏈接:http://muchs.cn/article0/ghesio.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、服務(wù)器托管、網(wǎng)站策劃、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站導(dǎo)航、用戶體驗(yàn)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)