常見(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)的鏈接,才可以訪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)文章
boostrapTable的refresh和refreshOptions區(qū)別淺析
在使用bootstrapTable時(shí),刷新數(shù)據(jù)有兩個(gè)方法refresh、refreshOptions,在其用法上有點(diǎn)區(qū)別,接下來(lái)通過(guò)本文給大家分享boostrapTable的refresh和refreshOptions的區(qū)別,需要的朋友可以參考下2017-01-01
學(xué)習(xí)JavaScript設(shè)計(jì)模式之享元模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的享元模式,對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下2016-01-01
如何用JavaScript學(xué)習(xí)算法復(fù)雜度
這篇文章主要介紹了如何用JavaScript學(xué)習(xí)算法復(fù)雜度,對(duì)算法感興趣的同學(xué),一定要看一下2021-04-04
JS驗(yàn)證日期的格式Y(jié)YYY-mm-dd 具體實(shí)現(xiàn)
這篇文章介紹了JS對(duì)日期格式的驗(yàn)證實(shí)例,有需要的朋友可以參考一下2013-06-06
如何通過(guò)JS實(shí)現(xiàn)日歷簡(jiǎn)單算法
這篇文章主要介紹了如何通過(guò)JS實(shí)現(xiàn)日歷簡(jiǎn)單算法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例
這篇文章主要介紹了用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
對(duì)于Form表單reset方法的新認(rèn)識(shí)
HTML中Form表單的reset方法被用來(lái)清空用戶(hù)所輸入的內(nèi)容,以前一直誤以為其是單純的將input等輸入項(xiàng)中的值清空2014-03-03
Javascript的異步函數(shù)和Promise對(duì)象你了解嗎
這篇文章主要為大家詳細(xì)介紹了Javascript異步函數(shù)和Promise對(duì)象,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2022-03-03

