cookie；
localStorage；sessionStorage；
IndexedDB；

书摘&心得：

1 cookie

  • 详见第六章 HTTP首部“为Cookie服务的首部字段”
  • cookie有字节限制和数量限制，在存储数据方面较弱
    • 大多数浏览器对cookie的限制是不超过4096字节
    • 毕竟最初用于在客户端存储会话信息
  • document.cookie
    • 可以读取页面包含的所有有效cookie字符串
    • 也可以设置新的cookie字符串

  • HTTP-only的cookie只能在服务器读取，javascript无法取得这种cookie的值。

    2 Web Storage

  • 两个目标：

    • ❑ 提供在cookie之外的存储会话数据的途径；
    • ❑ 提供跨会话持久化存储大量数据的机制。
  • 定义了两个对象：localStorage和sessionStorage。
    • localStorage是永久存储机制
    • sessionStorage是跨会话的存储机制。
  • Storage类型用于保存名/值对数据
    • Storage类型只能存储字符串。非字符串数据在存储之前会自动转换为字符串。
    • 方法
      • ❑ clear()：删除所有值；不在Firefox中实现。
      • ❑ getItem（name）：取得给定name的值。
      • ❑ key（index）：取得给定数值位置的名称。
      • ❑ removeItem（name）：删除给定name的名/值对。
      • ❑ setItem（name, value）：设置给定name的值。
  • 当Storage对象发生变化时，都会在文档上触发storage事件
    • image.png
    • 对于sessionStorage和localStorage上的任何更改都会触发storage事件

  • 限制

    • 存储数据大小大约为5M
    • 只能存储字符串

      sessionStorage

  • sessionStorage对象只存储会话数据

    • 数据只会存储到浏览器关闭。
    • 不受页面刷新影响，可以在浏览器崩溃并重启后恢复。
      • IE不支持
    • 只能由最初存储数据的页面使用
    • 存储：image.png
    • 读取：image.png
    • 删除：image.png

      localStorage

  • 要访问同一个localStorage对象，页面必须来自同一个域（子域不可以）、在相同的端口上使用相同的协议。

  • 用法和sessionStorage一样

  • 数据会保留到通过JavaScript删除或者用户清除浏览器缓存

    • 不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。

      3 IndexedDB

  • 是浏览器中存储结构化数据的一个方案

  • 思想是创造一套API，方便JavaScript对象的存储和获取，同时也支持查询和搜索。
    • 也就是将数据直接存在客户端，不与服务端交互
  • 是客户端的数据库
    • 类似于MySQL或Web SQL Database
    • 使用对象存储而不是表格保存数据
  • 用到的地方应该很少，大多数场景web Storage就够用了。