- 封装初衷,无非就是想给LocalStorage设置一个过期的时间并且设置值的时候,可以设置任何值
- 目前这个包放在npm库中,下载npm install happyLocalStorage
- 想要达到的效果,本方法要完全实现LocalStorage的功能,并且实现类似cookie的过期时间和设置任何值!
- cookie过期时间特点:cookie的过期时间,无论是否打开浏览器,到了过期的时间节点就会删除过期的cookie
- cookie的过期时间无非也就是两种情况
- 第一:一直开着浏览器,没到过期时间点,数据一直有效,到某个时间点自动清除过期的cookie
- 第二:设置完cookie关闭浏览器,等到第二次打开,没到过期时间点,数据一直有效,到某个时间点自动清除过期的cookie
- 本函数实现
- 第一: 一直开着浏览器,没到过期时间点,数据一直有效,到某个时间点自动清除过期的LocalStorage
- 第二:用户在有效时间内关闭浏览器又打开,那么会在初始化方法中开启一个定时器,到时间就会删除该条数据
- 第三:本函数在setLocalStorage方法中,setValue可以是任何值,不需要再进行手动JSON.stringify,同样再getLocalStorage方法中,也不需要JSON.parse
- 注意点:本函数一共支持四个方法
- setLocalStorage 设置
- getLocalStorage 获取
- delLocalStorage 删除
- delAllLocalStorage 删除全部
- 其中setLocalStorage/getLocalStorage这两个方法是配套的,我在setLocalStorage中内置了JSON.stringify,在getLocalStorage中内置了JSON.parse,所以,不要使用localStorage.setItem的方法设置,然后用getLocalStorage来获取,虽然我做了错误过滤,但是,很有可能出现的结果和当初设置的不一致就是JSON/parse/stringify的问题。反之亦然
class happyLocalStorage {
constructor() {}
introduce(){
console.log(`
1.本库提供设置、获取、删除、删除全部四个方法
1.1-hl.setLocalStorage-使用详情请看hl.setLocalStorageIntroduce()
1.2-hl.getLocalStorage('字符串类型')
1.3-hl.delLocalStorage('字符串类型')
1.4-hl.delAllLocalStorage()
`);
}
judgeDataType(val) {
return Object.prototype.toString.call(val).slice(8, -1);
}
_delLocalStorage(getName) {
let getLocalStorageValue = localStorage.getItem(getName);
try {
getLocalStorageValue = JSON.parse(getLocalStorageValue);
} catch (error) {
getLocalStorageValue = getLocalStorageValue;
};
if (this.judgeDataType(getLocalStorageValue) == "Object" && !!getLocalStorageValue._effectiveTime) {
let effectiveTime = new Date(getLocalStorageValue._effectiveTime).getTime();
if (new Date().getTime() - effectiveTime > 0) {
localStorage.removeItem(getName);
}else{
this[getName]=setTimeout(()=>{
localStorage.removeItem(getName);
},effectiveTime-new Date().getTime())
}
}
}
_initLocalStorage() {
let len = localStorage.length;
let arr = [];
if (len > 0) {
for (let i = 0; i < len; i++) {
let getKey = localStorage.key(i);
arr.push(getKey);
};
arr.forEach(item => {
this._delLocalStorage(item)
})
};
}
setLocalStorageIntroduce(){
console.log(
`
1.不输入第三个参数或者输入null,就是一个正常的localStorage,支持设置复杂数据类型
2.第三个参数为{},默认的过期时间就是15分钟
3.第三个参数为{timeSize:"'年'/'月'/'日'/'时'/'分'/'秒'",timeSize:数字类型}
4.例子-hl.setLocalStorage(name,{name:'张三},{timeSize:'分',timeSize:20})
`
)
}
setLocalStorage(setName, setValue, expiresObj = null) {
if (expiresObj == null) {
let JSONStringify = JSON.stringify(setValue);
localStorage.setItem(setName, JSONStringify);
} else {
if (Object.keys(expiresObj).length == 0) {
let newDate = new Date();
let nowTimeStamp = newDate.getTime();
nowTimeStamp += (1000 * 60 * 15);
newDate.setTime(nowTimeStamp);
expiresObj[setName] = setValue;
expiresObj._effectiveTime = newDate;
let stringifyExpiresObj = JSON.stringify(expiresObj);
localStorage.setItem(setName, stringifyExpiresObj);
clearTimeout(this[setName])
this[setName]=setTimeout(() => {
this.delLocalStorage(setName);
}, 1000 * 60 * 15);
} else {
let newDate = new Date();
let nowTimeStamp = newDate.getTime();
let timeout = null;
switch (expiresObj.timeScale) {
case '秒':
nowTimeStamp += (1000 * parseFloat(expiresObj.timeSize));
timeout = (1000 * parseFloat(expiresObj.timeSize));
break;
case '分':
nowTimeStamp += (1000 * 60 * parseFloat(expiresObj.timeSize));
timeout = (1000 * 60 * parseFloat(expiresObj.timeSize));
break;
case '时':
nowTimeStamp += (1000 * 60 * 60 * parseFloat(expiresObj.timeSize));
timeout = (1000 * 60 * 60 * parseFloat(expiresObj.timeSize));
break;
case '日':
nowTimeStamp += (1000 * 60 * 60 * 24 * parseFloat(expiresObj.timeSize));
timeout = (1000 * 60 * 60 * 24 * parseFloat(expiresObj.timeSize));
break;
case '月':
nowTimeStamp += (1000 * 60 * 60 * 24 * 30 * parseFloat(expiresObj.timeSize));
timeout = (1000 * 60 * 60 * 24 * 30 * parseFloat(expiresObj.timeSize));
break;
case '年':
nowTimeStamp += (1000 * 60 * 60 * 24 * 30 * 12 * parseFloat(expiresObj.timeSize));
timeout = (1000 * 60 * 60 * 24 * 30 * 12 * parseFloat(expiresObj.timeSize));
break;
default:
break;
}
newDate.setTime(nowTimeStamp);
expiresObj[setName] = setValue;
expiresObj._effectiveTime = newDate;
let stringifyExpiresObj = JSON.stringify(expiresObj);
localStorage.setItem(setName, stringifyExpiresObj);
clearTimeout(this[setName])
this[setName]=setTimeout(() => {
this.delLocalStorage(setName);
}, timeout);
}
}
}
getLocalStorage(getName) {
let getLocalStorageValue = localStorage.getItem(getName);
try {
getLocalStorageValue = JSON.parse(getLocalStorageValue);
} catch (error) {
getLocalStorageValue = getLocalStorageValue;
};
if (this.judgeDataType(getLocalStorageValue) == "Object" && !!getLocalStorageValue._effectiveTime) {
let effectiveTime = new Date(getLocalStorageValue._effectiveTime).getTime();
if (new Date().getTime() - effectiveTime < 0) {
return getLocalStorageValue[getName];
} else {
localStorage.removeItem(getName);
return null;
}
} else {
return getLocalStorageValue;
}
}
delLocalStorage(name) {
if(this.judgeDataType(name) === "String"){
localStorage.removeItem(name);
}else{
console.error(`${name}的类型不是字符串,请输入字符串...`);
}
}
delAllLocalStorage() {
localStorage.clear();
}
}
let hl = new happyLocalStorage();
hl._initLocalStorage();
export {
hl
}