浏览器的存储技术

cookie

• cookie 是指存储在用户本地终端上的数据，它是与具体的 web 页面或者站点相关
• cookie 数据会自动的在 web 浏览器和 web 服务器端传输，也就是说，http 请求发送时，会把保存在该请求域名下的所有 cookie 值发送给 web 服务器，所以 服务器可以读、写存储在客户端的 cookie
• cookie 的有效期
  • cookie 有效期默认情况下是很短的，一旦用户关闭浏览器，cookie 保存的数据会自动丢失
  • 如果想要延长 cookie 的有效期，可以通过设置 http 头信息中的 cache-control 属性的 max-age 值，或者修改 http 头信息中的 expires 属性值来延长有效期
• 优缺点
  • 优点：用于和服务器端通信，当 cookie 快要过期时，可以重新设置而不是删除
  • 缺点：会随着 http 头信息一起发送，增加了网络流量；它只能存储少量数据(4k)，而且只能存字符串

LocalStorage

• HTML5 新加入的用于本地存储的特定，解决了 cookie 存储空间不足的问题，localStorage 中一般浏览器支持的是 5M 大小，在不同的浏览器中会有差异
• 优点
  • localStorage 可以将第一次请求的数据存储到本地，这个相当于一个 5M 大小针对前端页面的数据库，相比于 cookie 可以节约带宽（高版本浏览器才支持）
  • localStorage 方法存储的数据没有时间限制，除非手动清除
• 缺点
  • 目前所有的浏览器中都会把 localStorage 的值类型定为 string 类型，对于 JSON 类型的数据需要做一些转换
  • localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，导致页面变卡
  • localStorage 在浏览器的隐私模式下是不可读取的

SessionStorage

• sessionStorage 和 localStorage 的唯一一点区别就是 localStorage 属于永久存储，而 sessinStorage 属于会话结束的时候 sessionStorage 里面的键值对就会被清空