我们前端人员存数据无非就是localStorage, sessionStorage, Cookie这老三样.
那这三种方法之间到底有什么区别呢?我们在不同情况下究竟应该怎么选择?
我打算用这篇文章总结一下,省得以后存数据的时候摸不着头脑.
1. 生命周期不同
localStorage:永久储存在本地,只要不主动删除就永远存在
sessionStorage:暂时存储在浏览器的内存当中,当前窗口关闭sessionStorage自动销毁
Cookie:可以设置生命周期,默认和sessionStorage是同一级别的,窗口关闭则销毁
2. 大小不同
localStorage,sessionStorage:最大可存储5m
Cookie:4KB左右
3. 作用域不同
localStorage:所有同源的页面都可以访问
sessionStorage:只有同源的页面的同一个窗口才可以访问
Cookie:可以设置作用域.Domain决定哪些主机接受Cookie,path决定哪些路径接受Cookie
4. 交互不同
localStorage,sessionStorage:这两个属性都属于H5的新特性Web storage,他们的特点是只是作为数据存在浏览器当中,不与服务器进行通信.
Cookie:直接参与与服务器的通信,每一次发送请求都会传到http头当中
总结:如何根据不同情况选择前端的存储方式
1.比较大的数据不要存在cookie当中
2.希望长期保存的数据存在localStorage中
3.单页面应用可以考虑sessionStorage.多页面应用,一个数据需要在很多不同页面窗口用到的那种,选择localStorage或Cookie.
4.一打开就必然要和服务器交互的数据可以写在Cookie中,如识别用户登录的数据,用户自定义的页面样式等等.反之则应该少用Cookie,因为每一次访问,Cookie都会携带在http的请求头中,比较占用网络资源.
