基本概念
- cookie:主要用来保存登录信息,像现在有的网站会有“记住密码”,这就是通过cookie中存入一段辨别用户身份的数据来实现的。
- sessionStorage:可以将一段数据在当前的会话中保存下来,刷新页面数据依旧存在,但页面关闭时,sessionStorage中的数据就会被清空。
- localStorage:在IE6时代,就有一个userData的东西用来本地储存,当时考虑到浏览器的兼容性,更通用的是flash,现在localStorage被大多数浏览器所支持。localStorage中的键值以字符串的形式储存。localStorage类似于sessionStorage,但区别在于储存在localStorage的数据可以长期保留。
- 补充:同源:协议相同、域名相同、端口相同。
区别
- cookie:一般不超过4k
- sessionStorage:5M甚至更多
- localStorage:5M甚至更多
数据有效期
- cookie:般由服务器生成,可以设置失效时间;若没有设置时间,关闭浏览器cookie失效,如果设置了时间,cookie就会存储在硬盘中,过期失效
- sessionStorage:仅在当前浏览器窗口关闭之前有效,关闭页面或者浏览器会被清除
- localStorage:永久有效,窗口或者浏览器关闭也会一直保存,除非手动永久删除
作用域
- cookie:在所有同源窗口中都是共享的
- sessionStorage:在同一个浏览器窗口是共享的(不同浏览器,即使是统一页面也不共享)
- localStorage:在所有同源窗口中共享
通信
- cookie:cookie在浏览器和服务器之间来回传递,如果使用cookie保存过多数据会造成性能问题
- sessionStorage:仅在客户端(浏览器)中保存,不参与服务器的通信
- localStorage:仅在客户端(浏览器)中保存,不参与服务器的通信
应用场景
- cookie:判断用户是否登录过网站,以便实现下次自动登录或记住密码;保存事件信息
- sessionStorage:敏感账号一次性登录,单页面用的较多
- localStorage:用于长期登录,适于长期保存在本地的数据