手机登录/注册
X
登录
方法名 | 数据有效期 | 存储地址 | 存储空间 | 应用场景 |
---|---|---|---|---|
chookie | 如果不设置有效期,那么就是临时存储(存储在内存中),是会话级别的,会话结束后,cookie也就失效了,如果设置了有效期,那么cookie存储在硬盘里,有效期到了,就自动消失了。 | 在浏览器和服务器间来回传递 | 不能超过4k | 主域名单点登录、浏览器与服务器数据传递 |
sessionStorage | 仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持(在当前页面打开新标签,复制当前页面的sessionStorage到新标签,不同标签不能实现sessionStorage数据共享) | 本地保存 | 可以达到5M或更大 | 保存临时数据,比如筛选条件数据缓存,防止刷新丢失 |
localStorage | 始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据 | 本地保存 | 可以达到5M或更大 | 保存token等用户信息,vuex持久化等 |
/**
* localStorage
* @存储:_local.set('access_token', '123456', 5000);
* @获取:_local.get('access_token');
* @删除:_local.remove('access_token');
* @清空:_local.clear();
*/
var _local = {
//存储,可设置过期时间
set(key, value, expires) {
let params = { key, value, expires };
if (expires) {
// 记录何时将值存入缓存,毫秒级
var data = Object.assign(params, { startTime: new Date().getTime() });
//添加存储
localStorage.setItem(key, JSON.stringify(data));
} else {
//toString() 方法返回一个表示该对象的字符串,call改变this指向
//是否为对象或者数组
if (Object.prototype.toString.call(value) == '[object Object]' || Object.prototype.toString.call(value) == '[object Array]') {
//JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串
value = JSON.stringify(value);
}
localStorage.setItem(key, value);
}
},
//获取
get(key) {
let item = localStorage.getItem(key);
// 先将拿到的试着进行json转为对象的形式
try {
item = JSON.parse(item);
} catch (error) {
// eslint-disable-next-line no-self-assign
item = item;
}
// 如果有startTime的值,说明设置了失效时间
if (item && item.startTime) {
let date = new Date().getTime();
// 如果大于就是过期了,如果小于或等于就还没过期
if (date - item.startTime > item.expires) {
localStorage.removeItem(key);
return false;
} else {
return item.value;
}
} else {
return item;
}
},
// 删除
remove(key) {
localStorage.removeItem(key);
},
// 清空
clear() {
localStorage.clear();
},
};
//export default _local
//import _local from "../utils/localStoragetime";
/**
* sessionStorage
*/
var _session = {
get: function(key) {
var data = sessionStorage[key];
if (!data || data === 'null') {
return null;
}
return JSON.parse(data).value;
},
set: function(key, value) {
var data = {
value: value,
};
sessionStorage[key] = JSON.stringify(data);
},
// 删除
remove(key) {
sessionStorage.removeItem(key);
},
// 清除全部
clear() {
sessionStorage.clear();
},
};
export { _local, _session };
/**
* @description 保存cookie
* @param {String} name 需要存储cookie的key
* @param {String} value 需要存储cookie的value
* @param {Number} timer 默认存储多少天
*/
function setCookie(name, value, timer = 1) {
var Days = timer; // 默认将被保存 1 天
var exp = new Date();
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie =
name + '=' + escape(value) + ';expires=' + exp.toGMTString();
}
/**
* @description 获取cookie
* @param {String} name 需要获取cookie的key
*/
function getCookie(name) {
var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'));
if (arr != null) {
return unescape(arr[2]);
} else {
return null;
}
}
/**
* @description 删除指定cookie
* @param {String} name 需要删除cookie的key
*/
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null)
document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString();
}
/**
* @description 清空cookie
*/
function clearCookie() {
var keys = document.cookie.match(/[^ =;]+(?==)/g);
var exp = new Date();
exp.setTime(exp.getTime() - 1);
if (keys) {
for (var i = keys.length; i--; ) {
document.cookie = keys[i] + '=0;path=/;expires=' + exp.toUTCString(); // 清除当前域名下的
document.cookie =
keys[i] +
'=0;path=/;domain=' +
document.domain +
';expires=' +
exp.toUTCString(); // 清除当前域名下的
document.cookie =
keys[i] + '=0;path=/;domain=ratingdog.cn;expires=' + exp.toUTCString(); // 清除一级域名下的或指定的
}
}
}
export default { setCookie, getCookie, delCookie, clearCookie };