海纳百川

浏览器存储介绍(cookie & session & local

2018-05-15  本文已影响0人  凛冬已至_123

cookie & session &localStorage 分别是什么?


  1. cookie是存储在浏览器上的一小段数据,用来记录某些当页面关闭或者刷新后仍需记录的信息。在控制台用document.cookie]查看你当前正在浏览的网站的cookie.
  2. cookie可以使用js在浏览器直接设置(用于记录不敏感信息,如用户名),也可以在服务端通过使用HTTP协议规定的set-cookie来让浏览器种下cookie,这是最常见的做法。
  3. 每次网络请求Request headers 中都会带上cookie。所以如果cookie太多太大对传输效率会有影响
  4. 一般浏览器最大存储cookie量为4k,所以大量数据不要存到cookie
  5. 设置coolie时的参数:

使用 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(){
    return {
        set: function(key, value, expireSeconds){
            localStorage[key] = JSON.stringify({
                value: value,
                expired: expireSeconds===undifind? undefined:Data.now() + 1000*expireSeconds
            }
            )
        },
        get: function(key){
            if(localDtorage[key]===undefined){
                return
            }
            var o = JSON.parse(localStorage[key])
            if(o.expired === undefined || Data.now() < o.expired){
                return o.value
            }else{
                delete localStorage[key]
            }
        }
    }
})
上一篇 下一篇

猜你喜欢

热点阅读