文章结构

  • Cookie
  • localStorage 和 sessionStroge

Cookie 本身不是用来做服务器端存储的，它是设计用来在服务器和客户端进行信息传递的，因此我们的每个 HTTP 请求都带着 Cookie。但是 Cookie 也具备浏览器端存储的能力（例如记住用户名和密码）。

使用 Cookie 的缺点：

  • 存储量太小，只有 4kb。
  • 所有 HTTP 请求都带着，会影响获取资源的效率。
  • API 简单，需要封装才能使用。

localStorage 和 sessionStorage

HTML5 标准就带来了 sessionStorage 和 localStorage，它们是专门为了浏览器端缓存而设计的。其优点有：

  • 存储量增大到 5MB。
  • 不会带到 HTTP 请求中。
  • API 适用于数据存储。localStorage.setItem(key, value)和localStorage.getItem(key)

sessionStorage 和 localStorage 的区别在于它是根据 session 过期时间实现，而 localStorage 会永久有效，应用场景不同。例如，一些需要及时失效的重要信息放在 sessionStorage 中，一些不重要但是不经常设置的信息，放在 localStorage 中。

注意：针对 localStorage.setItem，使用时尽量加入到 try-catch 中，某些浏览器是禁用这个 API 的。