封装一个具有操作local，session，cookie的类（可批量操作）
首先我们看下三个方法的基本操作
- localStorage:本地储存，具有长期有效的特征，浏览器关闭也不清空数据
class Storage {
// constructor(options) { }
constructor() {
console.log('constructor')
}
// 获取_key的数据 => { data, keyInfo }
_getData(_key) {
console.log('调用了get')
let _keys = Array.isArray(_key) ? _key : [_key]
_keys.forEach(() => {
return JSON.parse(localStorage.getItem())
});
}
//移除操作
_remove(_key) {
let _keys = Array.isArray(_key) ? _key : [_key]
const _data = _keys.forEach(() => {
localStorage.removeItem();
});
}
//设置操作
set(key, data, options = {}) {
console.log('调用了set')
const _key = this._getKey(key);
const _data = JSON.stringify(data, options);
localStorage.setItem(_key, _data);
}
// 是否有效期内
_isExpired(_key) {
const { keyInfo } = this._getData(_key);
const { expires, timestamp } = keyInfo;
if (!expires) {
return true;
}
return (
timestamp + expires * 24 * 3600 * 1000 - new Date().getTime() < 0
);
}
}
小结：我们先来逐一看看我们做了什么，首先是get操作，我们将传进的数据先判断是否为数组，不是数组就转换为数组，然后用forEach将数组的元素逐一通过localStorage.getItem()进行获取，最后再将获取到的数据通过JSON.parse()进行数据格式转换，移除操作同样判断是否为数组，然后进行逐一移除，设置操作是键值对的形式进行的,最后一个判断是否过期， 用存放时间和定时时间和当前时间做比较，小于就是过期
- Session：短期储存，在浏览器关闭以后数据就会被删除
class Session {
get(key) {
let keys = Array.isArray(key) ? key : [key]
keys.forEach((r) => {
return JSON.parse(sessionStorage.getItem[r])
});
}
set(key, value) {
var data = {
value: value
}
sessionStorage.setItem[key] = JSON.stringify(data);
}
// 删除
remove(key) {
let keys = Array.isArray(key) ? key : [key]
keys.forEach((r) => {
return JSON.parse(sessionStorage.removeItem[r])
});
}
// 清除全部
clear() {
sessionStorage.clear();
}
}
小结：和local有异曲同工之妙
- Cookie: 存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值
class Cookie {
setCookie(name, value, n) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + n);
document.cookie = name + "=" + value + ";expires=" + oDate;
}
getCookie(name) {
var str = document.cookie;
var arr = str.split("; ");
for (var i = 0; i < arr.length; i++) {
//console.log(arr[i]);
var newArr = arr[i].split("=");
if (newArr[0] == name) {
return newArr[1];
}
}
}
removeCookie(name) {
this.setCookie(name, 1, -1);
}
}
小结：这是一个常规的cookie操作类，实际使用中得根据需求进行调整，设置是一个键值对加上时间的字符串拼接，获取时候，要去除其中的特殊符号，移除较为简单
三合一
class Storage {
// constructor(options) { }
constructor() {
console.log('constructor')
}
// 获取_key的数据 => { data, keyInfo }
_getData(_key) {
console.log('调用了get')
let _keys = Array.isArray(_key) ? _key : [_key]
_keys.forEach(() => {
return JSON.parse(localStorage.getItem())
});
}
//移除操作
_remove(_key) {
let _keys = Array.isArray(_key) ? _key : [_key]
_keys.forEach(() => {
localStorage.removeItem();
});
}
//设置操作
set(key, data, options = {}) {
console.log('调用了set')
const _key = this._getKey(key);
const _data = JSON.stringify(data, options);
localStorage.setItem(_key, _data);
}
// 是否有效期内
_isExpired(_key) {
const { keyInfo } = this._getData(_key);
const { expires, timestamp } = keyInfo;
if (!expires) {
return true;
}
return (
timestamp + expires * 24 * 3600 * 1000 - new Date().getTime() < 0
);
}
}
class Cookie {
setCookie(name, value, n) {
var oDate = new Date();
oDate.setDate(oDate.getDate() + n);
document.cookie = name + "=" + value + ";expires=" + oDate;
}
getCookie(name) {
var str = document.cookie;
var arr = str.split("; ");
for (var i = 0; i < arr.length; i++) {
//console.log(arr[i]);
var newArr = arr[i].split("=");
if (newArr[0] == name) {
return newArr[1];
}
}
}
removeCookie(name) {
this.setCookie(name, 1, -1);
}
}
class Session {
get(key) {
let keys = Array.isArray(key) ? key : [key]
keys.forEach((r) => {
return JSON.parse(sessionStorage[r])
});
}
set(key, value) {
var data = {
value: value
}
sessionStorage[key] = JSON.stringify(data);
}
// 删除
remove(key) {
let keys = Array.isArray(key) ? key : [key]
keys.forEach((r) => {
return JSON.parse(sessionStorage.removeItem[r])
});
}
// 清除全部
clear() {
sessionStorage.clear();
}
}
export { Storage, Cookie, Session };
小结，这里把他们放进一个文件中，然后把他们类名暴露出去，我们再看看如何使用
const local = new _Storage()
local.set("name", { name: "SuperIron" }, { expires: 1 });
const Info = local.get('name')
首先我们先将类实例化，然后按照预留的插槽传参
