常見(jiàn)的瀏覽器存儲(chǔ)方式(cookie、localStorage、sessionStorage)
今天我們從前端的角度了解一下瀏覽器存儲(chǔ),我們常見(jiàn)且常用的存儲(chǔ)方式主要由兩種:cookie、webStorage(localStorage和sessionStorage)。下面我們來(lái)一一認(rèn)識(shí)它們。
Cookie基于HTTP規(guī)范,用來(lái)識(shí)別用戶(hù)。
Cookie是服務(wù)器發(fā)送到瀏覽器的一小段數(shù)據(jù),會(huì)在瀏覽器下次向同一服務(wù)器再發(fā)起請(qǐng)求時(shí)被攜帶并發(fā)送到服務(wù)器上。
Cookie誕生之初的作用就是解決HTTP的無(wú)狀態(tài)請(qǐng)求,用來(lái)記錄一些用戶(hù)相關(guān)的一些狀態(tài)。
•會(huì)話(huà)狀態(tài)管理(如用戶(hù)登錄狀態(tài)、購(gòu)物車(chē)、游戲分?jǐn)?shù)或其它需要記錄的信息)
•個(gè)性化設(shè)置(如用戶(hù)自定義設(shè)置、主題等)
•瀏覽器行為跟蹤(如跟蹤分析用戶(hù)行為等)
因?yàn)橐恍┣岸私换サ男枰?,后?lái)cookie也被用于存儲(chǔ)一些客戶(hù)端的數(shù)據(jù)。
Cookie的原生api不友好,需要自行封裝一下。下面是封裝后的方法。
創(chuàng)建cookie
/** * @description js原生設(shè)置cookie * @param {String} name 給你要設(shè)置的cookie起個(gè)名字(key) * @param {String} value cookie的具體內(nèi)容(value) * @param {String} expiredays 設(shè)置cookie的過(guò)期時(shí)間,單位:天 */ function setCookie(name, value, expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate() + expiredays); document.cookie = name + '=' + escape(value)+ ((expiredays == null) ? '' : ';expires=' +exdate.toGMTString()); }
獲取cookie
/** * @description js原生獲取cookie方法1 * @param {String} name 你要獲取的cookie名 */ function getCookie(name) { if (document.cookie.length > 0) { var start = document.cookie.indexOf(name + '='); if (start !== -1) { start = start + name.length + 1; var end = document.cookie.indexOf(';', start); if (end === -1) { end = document.cookie.length; return unescape(document.cookie.substring(start, end)); } } } return ''; } /** * @description js原生獲取cookie方法2 * @param {String} name 你要獲取的cookie名 */ function getCookie(name) { var cookieArr = document.cookie.split(';') || []; if(!cookieArr.length){ return ''; } for(var i = 0; i < cookieArr.length; i ++){ var key = $.trim(cookieArr[i]).split('=')[0]; var value = $.trim(cookieArr[i]).split('=')[1]; if(key === name){ return value; } } }
檢查cookie是否已存在
function checkCookie() { username = getCookie('username'); if (username !== null && username !== '') { alert('Welcome again ' + username + '!'); } else { username = prompt('Please enter your name:', ''); if (username !== null && username !== '') { setCookie('username',username,365); } } }
jquery.cookie.js封裝的cookie設(shè)置方法:
創(chuàng)建cookie
/** * 'name', cookie命名 * 'value',cookie的值 * { * expires: 7, // cookie有效期,單位天;默認(rèn)值:會(huì)話(huà)cookie,關(guān)閉瀏覽器cookie失效。 * path: '/', // cookie影響到的路徑;值為'/',表示設(shè)置cookie在整個(gè)域中可用;默認(rèn)值:創(chuàng)建cookie的頁(yè)面路徑。 * domain: 'example.com', // 定義cookie有效的域。默認(rèn)值:創(chuàng)建cookie的頁(yè)面域。 * secure: false, // 定義cookie安全性,默認(rèn)值:false,設(shè)置為true,則cookie在http中是無(wú)效的,cookie的傳輸需要使用安全協(xié)議(https)。 * } */ $.cookie('name', 'value', { expires: 7, path: '/', domain: 'example.com', secure: false});
讀取cookie
$.cookie('name'); //name存在返回對(duì)應(yīng)value,不存在返回null
讀取所有可用的cookies:
$.cookie(); //{'name': value}
TODO:直接調(diào)用會(huì)報(bào)錯(cuò)?
刪除cookie
//成功刪除cookie時(shí)返回true,否則返回false $.removeCookie('name'); // => true $.removeCookie('nothing'); // => false
注意:刪除cookie時(shí),必須傳遞用于設(shè)置cookie的完全相同的路徑,域和安全選項(xiàng),除非您依賴(lài)于默認(rèn)選項(xiàng)。
即:設(shè)置cookie時(shí)如果設(shè)置了path屬性或secure屬性,刪除的時(shí)候要帶著這些屬性,否則無(wú)法成功刪除cookie。
// This won't work! $.removeCookie('name'); // => false // This will work! $.removeCookie('name', { path: '/' }); // => true TODO:$.removeCookie無(wú)效?
(jquery1.9.1.js + jquery.cookie.js,插件無(wú)重復(fù)引用的情況,$.removeCookie提示undefined)
webStorage基于HTML5規(guī)范
HTML5 提供了兩種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法:localStorage和sessionStorage,掛載在window對(duì)象下。
webStorage是本地存儲(chǔ),數(shù)據(jù)不是由服務(wù)器請(qǐng)求傳遞的。從而它可以存儲(chǔ)大量的數(shù)據(jù),而不影響網(wǎng)站的性能。
Web Storage的目的是為了克服由cookie帶來(lái)的一些限制,當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶(hù)端上時(shí),無(wú)須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。比如客戶(hù)端需要保存的一些用戶(hù)行為或數(shù)據(jù),或從接口獲取的一些短期內(nèi)不會(huì)更新的數(shù)據(jù),我們就可以利用Web Storage來(lái)存儲(chǔ)。
localStorage的生命周期是永久性的。localStorage存儲(chǔ)的數(shù)據(jù),即使關(guān)閉瀏覽器,也不會(huì)讓數(shù)據(jù)消失,除非主動(dòng)的去刪除數(shù)據(jù)。如果 想設(shè)置失效時(shí)間,需自行封裝。
sessionStorage 的生命周期是在瀏覽器關(guān)閉前。
特性:
•關(guān)閉瀏覽器sessionStorage 失效;
•頁(yè)面刷新不會(huì)消除數(shù)據(jù);
•只有在當(dāng)前頁(yè)面打開(kāi)的鏈接,才可以訪(fǎng)sessionStorage的數(shù)據(jù),使用window.open打開(kāi)頁(yè)面和改變localtion.href方式都可以獲 取到
sessionStorage內(nèi)部的數(shù)據(jù);
存儲(chǔ)方式 |
作用與特性 |
存儲(chǔ)數(shù)量及大小 |
api |
cookie |
● 存儲(chǔ)用戶(hù)信息,獲取數(shù)據(jù)需要與服務(wù)器建立連接。 ● 可存儲(chǔ)的數(shù)據(jù)有限,且依賴(lài)于服務(wù)器,無(wú)需請(qǐng)求服務(wù)器的數(shù)據(jù)盡量不要存放在cookie中,以免影響頁(yè)面性能。 ● 可設(shè)置過(guò)期時(shí)間。 |
● 最好將cookie控制在4095B以?xún)?nèi),超出的數(shù)據(jù)會(huì)被忽略。 ● IE6或更低版本最多存20個(gè)cookie; IE7及以上版本最多可以有50個(gè);Firefox最多50個(gè);chrome和Safari沒(méi)有做硬性限制。 |
原生、$.cookie(詳見(jiàn)上文) |
localStorage |
● 存儲(chǔ)客戶(hù)端信息,無(wú)需請(qǐng)求服務(wù)器。 ● 數(shù)據(jù)永久保存,除非用戶(hù)手動(dòng)清理客戶(hù)端緩存。 ● 開(kāi)發(fā)者可自行封裝一個(gè)方法,設(shè)置失效時(shí)間。
|
5M左右,各瀏覽器的存儲(chǔ)空間有差異。(感興趣的同學(xué)可以自己試一下)。 |
// 保存數(shù)據(jù)到 localStorage localStorage.setItem('key', 'value'); // 從 localStorage 獲取數(shù)據(jù) let data = localStorage.getItem('key'); // 從 localStorage 刪除保存的數(shù)據(jù) localStorage.removeItem('key'); // 從 localStorage 刪除所有保存的數(shù)據(jù) localStorage.clear(); |
sessionStorage |
● 存儲(chǔ)客戶(hù)端信息,無(wú)需請(qǐng)求服務(wù)器。 ● 數(shù)據(jù)保存在當(dāng)前會(huì)話(huà),刷新頁(yè)面數(shù)據(jù)不會(huì)被清除,結(jié)束會(huì)話(huà)(關(guān)閉瀏覽器、關(guān)閉頁(yè)面、跳轉(zhuǎn)頁(yè)面)數(shù)據(jù)失效。
|
同localStorage |
// 保存數(shù)據(jù)到 sessionStorage sessionStorage.setItem('key', 'value'); // 從 sessionStorage 獲取數(shù)據(jù) let data = sessionStorage.getItem('key'); // 從 sessionStorage 刪除保存的數(shù)據(jù) sessionStorage.removeItem('key'); // 從 sessionStorage 刪除所有保存的數(shù)據(jù) sessionStorage.clear(); |
總結(jié):
以上所述是小編給大家介紹的常見(jiàn)的瀏覽器存儲(chǔ)方式(cookie、localStorage、sessionStorage),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
JavaScript使用AOP編程思想實(shí)現(xiàn)監(jiān)聽(tīng)HTTP請(qǐng)求
這篇文章主要為大家詳細(xì)介紹了如何在JavaScript使用AOP編程思想實(shí)現(xiàn)監(jiān)聽(tīng)HTTP請(qǐng)求,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02JS控制頁(yè)面跳轉(zhuǎn)時(shí)未請(qǐng)求要跳轉(zhuǎn)的地址怎么回事
在js中通過(guò)window.location.href控制頁(yè)面跳轉(zhuǎn)時(shí),有時(shí)會(huì)跳轉(zhuǎn)至緩存頁(yè)面,并沒(méi)有真正去請(qǐng)求要跳轉(zhuǎn)的地址,導(dǎo)致頁(yè)面數(shù)據(jù)未能及時(shí)加載刷新。怎么解決呢?下面小編給大家解答下2016-10-10JS常見(jiàn)DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
這篇文章主要介紹了JS常見(jiàn)DOM節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了JavaScript針對(duì)DOM節(jié)點(diǎn)的創(chuàng)建 ,插入,刪除,復(fù)制,查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-05-05JavaScript獲取移動(dòng)設(shè)備型號(hào)的實(shí)現(xiàn)代碼(JS獲取手機(jī)型號(hào)和系統(tǒng))
這篇文章主要介紹了JavaScript獲取移動(dòng)設(shè)備型號(hào)的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-03-03mpvue實(shí)現(xiàn)微信小程序快遞單號(hào)查詢(xún)代碼
這篇文章主要介紹了mpvue實(shí)現(xiàn)微信小程序快遞單號(hào)查詢(xún),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04原生js實(shí)現(xiàn)日期聯(lián)動(dòng)
日期聯(lián)動(dòng)算是一個(gè)比較常見(jiàn)的功能了,隨便度娘一下,你就能找到N多代碼,今天給大家介紹的是個(gè)人比較常用,代碼很簡(jiǎn)潔,高效,這里推擠給大家。2015-01-01