在 web 开发中,我们知道 cookie、session、localStorage都可以保存用户的数据,cookie的 domain、path 限制了 cookie 的跨域, 有数量和大小的限制,可以设置有效时间。 session是后台在浏览器注入一个设置了 httponly 的不可读取的 cookie , session data由后台保存在数据库或者内存中,在web中,session 是靠 cookie 作为唯一标示来实现的,也可以设置过期时间。 localStorage 是 H5 的数据存储办法, 也是有大小限制的,但是不可以设置过期时间。 本文主要说的是如何自定义办法让 localStorage实现过期时间。
module.exports = {
// 过期时间,默认30天
age: 30*24*60*60*1000,
/**
* 设置过期时间
* @param age
* @returns {exports}
*/
setAge: function(age){
this.age = age;
return this;
},
/**
* 设置 localStorage
* @param key
* @param value
*/
set: function(key, value){
localStorage.removeItem(key);
var isObject = value instanceof Object,
_time = new Date().getTime(),
_age = this.age;
// 如果不是对象,新建一个对象把 value 存起来
if(!isObject) {
var b = value;
value = {};
value._value = b;
}
// 加入时间
value._time = _time;
// 过期时间
value._age = _time + _age;
// 是否一个对象
value._isObject = isObject;
localStorage.setItem(key, JSON.stringify(value));
return this;
},
/**
* 判断一个 localStorage 是否过期
* @param key
* @returns {boolean}
*/
isExpire: function(key) {
var isExpire = true,
value = localStorage.getItem(key),
now = new Date().getTime();
if(value) {
value = JSON.parse(value);
// 当前时间是否大于过期时间
isExpire = now > value._age;
} else {
// 没有值也是过期
}
return isExpire;
},
/**
* 获取某个 localStorage 值
* @param key
* @returns {*}
*/
get: function(key) {
var isExpire = this.isExpire(key),
value = null;
if(!isExpire) {
value = localStorage.getItem(key);
value = JSON.parse(value);
if(!value._isObject) {
value = value._value;
}
}
return value;
}
};
使用
var localstorage = require('./localstorage.js');
localstorage.setAge(24*60*60*1000).set('a': 'abc').set('b',{a:1,b:2})
在ios设备上无法重复setItem()
另外,在iPhone/iPad上有时设置setItem()时会出现诡异的QUOTA_EXCEEDED_ERR错误,这时一般在setItem之前,先removeItem()就ok了。