2019-04-24 localStorage & cookie & session

开门见山看需求：使用 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手动清除。