关于前端缓存问题

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()	清除所有数据