本地存储小结
cookie
cookie的来源是http协议是无状态的协议,所以发明了cookie用做保存状态的额外手段,主要用于判断用户是否登陆以及保存登陆信息。它有单个特点:
(1)通常由服务器端生成,存储在客户端,可以设置失效时间(max-age属性,之前是expire)
(2)每次请求都会附带cookie一起被传送
(3)容量非常小,被限制在4kb左右。第二个特点很好解释了为什么容量被限制地这么小
SessionStorage和LocalStorage是HTML5的新特性,统称为web storage,可以允许浏览器在用户本地存储数据,但不能像cookie那样参与和服务器端的通信,因此它们俩的容量也比较大,都是5M。
LocalStorage
LocalStorage对象存储的是没有截止日期的数据,当浏览器被关闭时数据也不会被删除,除非用户主动删除,否则这些数据是一直可用的
SessionStorage
SessionStorage直译过来是会话存储,顾名思义,其数据有效期仅限于同一个会话期间,也就说关闭一个具体的浏览器标签页,该页下的存储与SessionStorage就会被删除
三者的区别
区别:(1)容量的区别,cookie只有4kb,而web storage有5M
(2)有效期的区别,cookie可以设置过期时间,SessionStorage在一个回话期间有效,页面关闭后就失效了,LocalStorage永久有效。
(3)cookie每次都会被附加在http头中,参与客户端与服务器的通信,而web Storage只能用于本地存储,不能用于通信。
(4)易用性有区别,程序员需要自己封装操作cookie的函数,较为麻烦,而LocalStorage和SessionStorage有很多已经封装好的函数,比如setItem(),getItem(),removeItem()等等,也可以再次封装以便对Array和Object有更好的支持。
应用
web storage是为了更大的存储容量设计的,cookie主要是用于客户端和服务器端通信的。 曾经还使用 Cookie 来保存用户在电商网站的购物车信息,但有了 localStorage,似乎在这个方面也可以给 Cookie 放个假了~
web storage也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据,localStorage 也是非常适用的。
如果遇到一些内容特别多的表单,为了优化用户体验,可能要把表单页面拆分成多个子页面,然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。