Cookie VS WebStorage

  1. 有效时间:服务器生成,不同的类型有不同的有效期,可以从服务器端或者客户端设置,一般是从服务器端设置。
  2. 数据清理:关闭浏览器。
  3. 数据量:4KB以内。
  4. 数据传递:
    • 每个请求都有,放在HTTP头中,保存过多会有性能问题。
    • 存储在接下来的请求中要被发还给服务器的数据。可以被客户端读取,但是主要是给服务器端读取的。
  5. 安全性:可以设置httpOnly flag 为true来保证安全性,该设置使得客户端没有操作该Cookie的权限。
  6. 应用场景:保存登陆信息(记住密码),一般是在小甜饼(Cookie)中存入一段数据(唯一)来辨别用户身份(是否登录过)。

WebStorage

LocalStorage: HTML5中加入的

  1. 有效时间:可以一直存储数据,没有过期时间(expiration date)。
  2. 数据清理:只能通过JavaScript、清除浏览器缓存(clear browser cache)或者本地数据存储来清除存储好的数据。否则永久保存。
  3. 数据量:一般5MB,三种存储方式里面数据容量最大。
  4. 数据传递:数据永远不会传送到服务器,只能从客户端(浏览器)读取。
  5. 安全性:。
  6. 应用场景:管理购物车;HTML5游戏数据。

SessionStorage

  1. 有效时间:只储存一个会话(session)的时间,也就是关闭该标签页或者浏览器会清除数据。
  2. 数据清理:关闭该标签页或者浏览器。刷新页面不会清除。
  3. 数据量:至少5MB,存储的数据量比Cookie大。
  4. 数据传递:数据永远不会传送到服务器,只能从客户端(浏览器)读取。
  5. 安全性:。
  6. 应用场景:长表单被分成多个表单子页面来优化用户体验,按步骤让用户填写。

参考文档:
wiki cookie
详说 Cookie, LocalStorage 与 SessionStorage