區(qū)別
localStorage: localStorage 的生命周期是永久的悯舟，關(guān)閉頁(yè)面或?yàn)g覽器之后 localStorage 中的數(shù)據(jù)也不會(huì)消失。localStorage 除非主動(dòng)刪除數(shù)據(jù)溯香，否則數(shù)據(jù)永遠(yuǎn)不會(huì)消失
sessionStorage: sessionStorage 的生命周期是僅在當(dāng)前會(huì)話(huà)下有效鲫构。sessionStorage 引入了一個(gè)“瀏覽器窗口”的概念，sessionStorage 是在同源的窗口中始終存在的數(shù)據(jù)玫坛。只要這個(gè)瀏覽器窗口沒(méi)有關(guān)閉结笨，即使刷新頁(yè)面或者進(jìn)入同源另一個(gè)頁(yè)面，數(shù)據(jù)依然存在湿镀。但是 sessionStorage 在關(guān)閉了瀏覽器窗口后就會(huì)被銷(xiāo)毀炕吸。同時(shí)獨(dú)立的打開(kāi)同一個(gè)窗口同一個(gè)頁(yè)面，sessionStorage 也是不一樣的
cookie: cookie生命期為只在設(shè)置的cookie過(guò)期時(shí)間之前一直有效勉痴，即使窗口或?yàn)g覽器關(guān)閉赫模。 存放數(shù)據(jù)大小為4K左右, 有個(gè)數(shù)限制（各瀏覽器不同），一般不能超過(guò)20個(gè)蒸矛。缺點(diǎn)是不能儲(chǔ)存大數(shù)據(jù)且不易讀取
建議
由于 vue 是單頁(yè)面應(yīng)用瀑罗，操作都是在一個(gè)頁(yè)面跳轉(zhuǎn)路由胸嘴，因此 sessionStorage 較為合適
原因:
- sessionStorage 可以保證打開(kāi)頁(yè)面時(shí) sessionStorage 的數(shù)據(jù)為空
- 每次打開(kāi)頁(yè)面 localStorage 存儲(chǔ)著上一次打開(kāi)頁(yè)面的數(shù)據(jù)，因此需要清空之前的數(shù)據(jù)
用法
一. localstorage 和 sessionstorage
- 首先要判斷瀏覽器是否支持 localStorage / sessionStorage
比如判斷 localStorage
if (window.localStorage) {
alert('瀏覽支持 localStorage');
} else {
alert('瀏覽暫不支持 localStorage');
}
- localStorage 和 sessionStorage 都具有相同的操作方法斩祭，例如
setItem()劣像、getItem()和removeItem()等
-
儲(chǔ)存數(shù)據(jù)
用途: 將value存儲(chǔ)到key字段
用法:setItem( key, value)
代碼示例
sessionStorage.setItem('key', 'value');
localStorage.setItem('key', 'value');
注: 如果需要儲(chǔ)存數(shù)組或?qū)ο蟮脑?huà), 可以用JSON格式傳入
-
取出數(shù)據(jù)
用途: 獲取指定key本地存儲(chǔ)的值
用法:getItem(key)
代碼示例
sessionStorage.getItem('key');
localStorage.getItem('key');
-
修改數(shù)據(jù)
用途: 修改指定key本地存儲(chǔ)的值
用法:setItem(key)
代碼示例
sessionStorage.setItem('key', 'newVal');
localStorage.setItem('key', 'newVal');
-
刪除數(shù)據(jù)
用途: 刪除指定key本地存儲(chǔ)的值
用法:removeItem(key)
代碼示例
sessionStorage.removeItem('key');
localStorage.removeItem('key');
-
清除數(shù)據(jù)
用途: 清除所有本地存儲(chǔ)的數(shù)據(jù)
用法:clear()
代碼示例
sessionStorage.clear();
localStorage.clear();
二. cookie
- 儲(chǔ)存數(shù)據(jù)
window.document.cookie = 'key=val';
- 取出數(shù)據(jù)
document.cookie
example:
// 設(shè)置 Cookie
setCookie(key, val, days) {
let date = new Date(); // 獲取時(shí)間
date.setTime(date.getTime() + 24 * 60 * 60 * 1000 * days);
// 字符串拼接 Cookie
window.document.cookie = `${key}=${val};path=/;expires=${date.toGMTString()};`;
}
// 獲取 Cookie
getCookie() {
let cookie = document.cookie.split(';');
}
// 清除Cookie
clearCookie() {
this.setCookie('', '', -1);
}
