共同点: 用于数据的存储.
区别:
1, 是否需要添加到 http 请求头?
HTTP Cookie(cookie): 在客户端存储会话信息, 要求服务器对任意 HTTP 请求发送 set-cookie HTTP 头作为响应的一部分, 包含会话信息. 例如 set-cookie: name=value. 然后浏览器会存储这样的会话信息, 并在这之后, 通过为每个请求添加 cookie HTTP 头将信息发送回服务器. 如 cookie:name=value.
web Storage: 无须将数据发回服务器.
2, 作用范围
cookie: 是绑定在特定域名下的, 当设定了一个 cookie 后, 再给创建它的域名发送请求时, 都会包含这个 cookie. 这个限制保证了储存在 cookie 中的信息只能让批准的接受者访问, 而无法被其他域访问.
sessionStorage:sessionStorage 对象存储特定于某个会话的数据, 可以跨越页面刷新而存在. 它绑定于某个服务器会话, 所以当文件在本地运行时是不可用的. 对多页面应用有限制, 因为数据只能由最初给对象存储数据的页面访问到.
localStorage: 要访问同一个 localStorage 对象, 页面必须来自同一个域名 (子域名无效), 使用同一种协议, 在同一个端口上.
3, 容量
cookie: 每个域的 cookie 总数是有限的, 各个浏览器之间各有不同. 例如:
IE6 以及更低版本限制每个域名最多 20 个 cookie,IE7 和之后版本每个域名最多 50 个; Firefox 限制每个域最多 50 个 cookie,Opera 限制每个域最多 30 个 cookie;Safari 和 Chrome 对每个域的 cookie 数量限制没有硬性规定.
浏览器对 cookie 的尺寸也有限制, 最好是 4095B, 尺寸限制影响到一个域下所有的 cookie, 而并非每个 cookie 单独限制.
Web Storage:5MB
4, 失效时间
Cookie: 设置 expires 来表示 cookie 何时应该被删除的时间戳.
sessionStorage: 存储特定会话数据, 在浏览器关闭后立即删除.
localStorage: 数据保留到通过 JavaScript 删除或是用户清除浏览器缓存.
来源: http://www.bubuko.com/infodetail-3189836.html