关于前端缓存问题

Cookie、localStorage、sessionStorage的异同

  之前没怎接触过前端缓存,请教了前端同事之后他给我粘了几行代码,用localStorage存取信息,后来老大review代码的时候发现,被批了一顿,现在好好看看这几个前端缓存的区别,铭记历史。。。

  1.Cookie

    大小:4k左右

              生命周期:一般在服务器生成,可以设置失效的时间,如果在浏览器端生成,关闭浏览器失效

         用途:由于大小的限制,可以用于保存用户的登陆信息,比如登录后提示是否保存密码,就是用这个做的

       

        2.localStorage

    大小:5MB左右

              生命周期:关闭页面或者浏览器后被清除

         用途:如H5游戏会产生很多本地数据

      

        3.sessionStorage

    大小:5MB左右

              生命周期:若不手动清除,永远都存在

         用途:单线流程页面较多字段较多的情况,用sessionStorage可以减少ajax请求次数,页面数据加载会很快

      4.对sessionStorage和localStorage进行操作(二者有相同的操作方法)

sessionStorage/localStorage.length 获得storage中的个数
sessionStorage/localStorage.key(n) 获得storage中第n个元素对的键值(第一个元素是0)
sessionStorage/localStorage.getItem(key) 获取键值key对应的值
sessionStorage/localStorage.key 获取键值key对应的值
sessionStorage/localStorage.setItem(key, value) 添加数据,键值为key,值为value
sessionStorage/localStorage.removeItem(key) 移除键值为key的数据
sessionStorage/localStorage.clear() 清除所有数据

猜你喜欢

转载自www.cnblogs.com/crystal-wei/p/8963531.html