Cookie 和 LocalStorage 比较

基本概念：

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

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

• 硬盘Cookie

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

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

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

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

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

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

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

• LocalStorage
  • WebStorage有两种机制
    • 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