开门见山看需求:使用 localStorage封装一个 Storage 对象,达到如下效果:
Storage.set('name', '饥人谷')
Storage.set('age', 2, 30) ; //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'], 60)
Storage.get('name') // ‘饥人谷’
Storage.get('age') // 如果不超过30秒,返回数字类型的2;如果超过30秒,返回 undefined,并且 localStorage 里清除 age 字段
Storage.get('teachers') //如果不超过60秒,返回数组; 如果超过60秒,返回undefined
var Storage = (function(){ //函数包括set和get功能
return {
set: function(key, value, expireSeconds){ //三个参数,value为返回值,用来判断是否超过时间?第三个参数为有效时间
localStorage[key] = JSON.stringify({ //存储格式为字符串,stringify转格式
value: value,
expired: expireSeconds===undefined?undefined:Date.now() + 1000*expireSeconds //没有设置时间为undefined,设置事件为现在的事件加上有效时长
})
},
get: function(key){ //没有存储内容不返回值
if(localStorage[key] === undefined){
return
}
var o = JSON.parse(localStorage[key])
if(o.expired === undefined || Date.now() < o.expired){
return o.value
}else{
delete localStorage[key] //JSON.parse格式转换回来,进行判断,如果没有设置时间或者在有效时间内,返回value;否则超过时间就删除内容
}
}
}
})()
cookie & session &localStorage 分别是什么?
1.cookie是存储在浏览器上的一小段数据,用来记录某些当页面关闭或者刷新后仍然需要记录的信息;
2.session是一次浏览器和服务器的交互的会话,第一次访问时,服务器会创建一个新的sesion,并且把session的Id以cookie的形式发送给客户端浏览器,session信息存在于服务器端
3.localStorage ,webstorage特性的API之一,用于将大量数据(最大5M)保存在浏览器中,保存后数据永远存在不会失效过期,除非用 js手动清除。