Cookie 和 LocalStorage 比较

基本概念：

• Cookie：指某些网站为了辨别用户身份而存储在用户本地终端上的数据。
  • 分类
    • 内存 Cookie

由浏览器维护，保存在内存中，浏览器关闭就小时，存在时间短暂。

• 硬盘 Cookie

保存在硬盘中，除非用户手工清理或到了过期时间，一般不会删除。

• 用途
  • 服务器可以设置或读取 Cookies 中包含的信息，借此维护用户跟服务器会话中的状态

因为 HTTP 协议是无状态的，就是说服务器不知道用户上一次做了什么，为实现交互，就用 Cookie 来记录。

比如，网上购物，用户选购了一个商品，服务器在向用户发送网页时还发送一段记录商品信息的 Cookie，当用户访问另一个页面，浏览器会把 Cookie 发送给服务器端，于是服务器就知道用户选购了什么。

• 登录网站勾选“下次自动登录”，那么下次访问就不用再输入密码等信息。

这是因为在第一次登录时，如果勾选了自动登录，那么服务器发送包含登录凭据（用户加密码的某种加密形式）的 Cookie 到用户的硬盘上，第二次登录的时候，浏览器就会发送该 Cookie，服务器验证凭据，就不用再次输入密码等。

• 缺陷
  • Cookie 会被附加到每个 HTTP 请求中，无形增加了流量
  • HTTP请求中的 Cookie 是明文传递，安全性成问题。（HTTPS 不会）
  • Cookie 大小限制在 4KB，对于复杂的存储需求是不够用的

• LocalStorage
  • Web Storage 有两种机制
    • sessionStorage 为每一个给定的源维持一个独立的存储区域，该存储区域在页面会话期间可用（浏览器是打开状态，包括页面重载和恢复）
    • localStorage 同上，但浏览器关闭之后，重新打开数据还是存在。

 

区别

特性	Cookie	LocalStorage	sessionStorage
数据的声明周期	一般由服务器生成，可设置失效时间。如果在浏览器生成，默认是关闭浏览器之后失效	除非被清楚，否则永久保存	仅在当前会话有效，关闭页面或浏览器后被清除
存放数据大小	4KB	一般 5MB	一般 5MB
与服务端通信	每次都会携带在HTTP头中，如果使用 cookie 保存过多数据会带来性能问题	仅在客户端中保存，不参与和服务器的通信。也可有脚本选择性提交到服务器端？	同 LocalStorage
用途	一般由服务器端生成，用于标识用户身份	用于浏览器端缓存数据	同 LocalStorage
共享

 

相同点：

三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。

 

 

参考资料：

1. Web Storage API： https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Storage_API
2. cookie： https://zh.wikipedia.org/wiki/Cookie