浏览器端的存储总结

• 多数情况，数据都是存储在服务器的
• 如果有必要，项目有需求，浏览器也可以存储一部分数据的，但只能存储少量的数据。

• 如果抛开兼容性问题，浏览器有多种存储数据的方案，比如

  • Web Storage
  • Cookie
  • IndexedDB
  • 浏览器缓存等等
• 在浏览器控制器的 Application 选项卡中，可以查看到他们

对比

• Cookie

  • 一个 cookie 最大为 4KB，每个网站最多有 20+ 个左右的 cookie（具体取决于浏览器）。
  • Cookie存储的数据会随浏览器自动发送到服务器
  • Cookie受跨域影响，默认情况下，一个域(http://www.a.com)的cookie不会随请求发送到另一个域(http://www.b.com)
  • 虽然浏览器有操作cookie的API，但cookie主要由服务器设置。

• IndexedDB

  • IndexedDB 是一个浏览器内置的数据库，它比 Web Storage 强大得多。
  • 有完备的API，但比较繁琐
  • IndexedDB 适用于离线应用（不需要联网的应用）
  • 更新数据比较麻烦

• Web Storage

  • Web Storage 又分为 localStorage（本地存储） 和 sessionStorage（会话存储）
  • localStorage 和 sessionStorage 的区别只有一点：localStorage永久保存数据，sessionStorage存储的数据在浏览器关闭后消失
  • localStorage 和 sessionStorage 的API完全相同
  • 存储的数据默认不会随请求被发送到服务器，程序员可以自由控制是否携带这些数据。
  • 大多数浏览器都允许保存至少 2MB 的数据（或更多）

localStorage 和 sessionStorage的API

• 二者的API方法完全一样
• localStorage.setItem('key', 'value') -- 在浏览器存储中，保存一个值，只能存字符串、数字类型
• localStorage.getItem('key') -- 从浏览器存储中中获取一个值
• localStorage.removeItem('key') -- 从浏览器存储中移除一个值

使用 localStorage 保存 token 值

登录成功后，将服务器返回的 token 存储到 localStorage 中。

localStorage.setItem('token', res.token);

这个值会永久保存，后续如果需要这个值，就可以使用 localStorage.getItem('token') 将其取出使用。