一、前言
因为localStorage
和sessionStorage
只能存储字符串类型,平时自己会存一些json
数据,存的时候要先json转成字符串
,然后取出来的时候在把数据转成json数组
,觉得麻烦,然后这里封装成一个构造函数SStorage
来调用!localStorage
为永久保存,所以这里也设置了过期时间
保存数据时,记录保存数据的时间戳(
st
)、保存多长时间(t
)、数据(val
)。
读取数据时,通过读取数据的时间戳(now
)与保存数据的时间戳、保存多长时间相比较。
t == 0
永久保存数据,返回值val
。
now < st + t
数据未过期,返回val
。
now > st + t
数据过期,清除缓存,返回null
。
二、 localStorage和sessionStorage
sessionStorage
:将数据保存在客户端本地中,浏览器窗口关闭或者tab标签页关闭,存储的数据立即清除。localStorage
:将数据保存在客户端本地中,永久保存数据,除非主动的去删除数据。- localStorage和sessionStorage的存储数据大小一般都是:
5MB
;两者的主要区别就是sessionStorage为临时保存
,而localStorage为永久保存
三、封装代码
/**
* @description 对sessionStorage、localStorage的封装,localStorage默认一直保存数据,seesionStorage关闭标签页或窗口立即清除数据
* @class SStroage
* @example
* var session=new SStorage('session','aaasss');
* session.set('da',{a:1,b:2});
* session.get('da');
* session.remove('da');
*/
class SStorage {
/**
* @param {String} param 使用sessionStorage,还是localStorage,默认使用的是localStorage
* @param {String} pre 保存json数据的前缀
*/
constructor(param, pre = 'jm_save_') {
this.type = localStorage;
this.prefix = pre;
if (param == 'session' || param == 'sessionStorage') {
this.type = sessionStorage;
}
this.length = this.type.length; //storage的长度
}
/**
* @function 设置缓存数据,思路:封装成一个json数据存进去,保存多长时间、过期时间、保存的数据
* @method SStorage.set(name) 调用的是localStorage.setItem(name)或者sessionStorage.setItem(name)
* @param {string} name 保存数据的key值,必填
* @param {any} [value=''] 需要保存的数据
* @param {number} [time=0] 过期时间,以毫秒为单位,默认永不过期
* @example SStorage.set("aa","123456",5000)
*/
set(name, value = '', time = 0) {
time = isNaN(time - 0) ? 0 : time - 0; //转换成数字,字符串类型的数字也转成数字
time = time > 0 ? time : 0; //有负数的情况
let obj = {};
obj[this.prefix + 'value'] = value;
obj[this.prefix + 'time'] = time;
obj[this.prefix + 'startTime'] = new Date().getTime() //记录何时将值存入缓存,毫秒级
if (name) {
this.type.setItem(name, JSON.stringify(obj));
} else {
console.log("请先设置name名");
}
}
/**
* @function 获取缓存数据
* @method SStorage.get(name) 调用的是localStorage.getItem(name)或者sessionStorage.getItem(name)
* @param {string} name 保存数据的key值,必填
* @example
* SStorage.get("aa")
*/
get(name) {
let item = this.type.getItem(name);
if (item) {
//先尝试进行json字符串转为对象,可能有直接存储字符串的情况
try {
item = JSON.parse(item);
} catch (error) {
//如果不行就不是json的字符串,就直接返回
item = item;
}
// 判断有没有设置过期时间、保存数据的格式
//先判断设置时的时间大于0,是否为数字,过期时间是否也为数字
if ((item[this.prefix + 'startTime'] > 0) && (!isNaN(item[this.prefix + 'startTime'])) && (!isNaN(item[this.prefix + 'time']))) {
let date = new Date().getTime(); //获取当前时间
if (item[this.prefix + 'time'] == 0) { //等于0永不过期
return item[this.prefix + 'value'];
} else if (item[this.prefix + 'time'] + item[this.prefix + 'startTime'] > date) { //开始时间+保存时间如果大于当前时间,(未过期)就返回值,否则清空
return item[this.prefix + 'value'];
} else {
localStorage.removeItem(name);
return null;
}
} else {
//如果没有设置失效时间,直接返回值
return item;
}
} else {
return null;
}
}
/**
* @function 清除缓存
* @method SStorage.remove(name) 调用removeItem(name)或是clear()
* @param {string} [name] 保存数据的key值,不填清空所有缓存
* @example SStorage.remove("aa")
*/
remove(name) {
if (name) { //有参数清除单条数据
this.type.removeItem(name);
} else { //无参数清除所有缓存数据
this.type.clear();
}
}
/**
* @function 获取对应键名(下标)
* @param {number} num 一个整数,表示要获取的键名索引
* @returns 键名(下标)
*/
key(num) {
num = isNaN(num - 0) ? -1 : parseInt(num - 0); //转换成数字,字符串类型的数字也转成数字,同时取整
if (num >= 0) {
return this.type.key(num);
} else {
return null;
}
}
}
四、调用方式
<script>
// 先实例化调用一下,是使用sessionStorage,还是localStorage,默认为localStorage
var session = new SStorage('session'); //这里使用sessionStorage
session.set("userinfo", { id: 1001, name: 'zzz' }); //存储数据
var user = session.get("userinfo"); //获取数据
console.log(user);
// session.remove("userinfo"); //清除数据
// console.log(session.length); //1
// console.log(session.key(0)); //userinfo
</script>