简单了解前端存储 cookie LocalStorage indexeddb

cookie

• 什么是cookie？
  简单的说，cookie是浏览器存储在电脑上的一小段文本文件。cookie是存文本形式，不包含任何可执行的代码。每次请求时会将这串字符串发送至服务端。如下图

C56B33B8-D91C-443C-9647-E87C82FF0EC9.png

• 如何创建cookie？
  web服务器会在http请求头的Response Headers 中返回一个Set-Cookie: 的字段来设置. cookie，其中cookie中需要设置的参数包括 expires 过期时间、domain 设置cookie的所在域名、path设置cookie的路径、secure用来标记只有通过ssl或https创建的才会发送至服务端。

247964EF-46CC-4A33-AC12-C8FB6F5B0F7F.png

• cookie的存储大小？
  <=4kb

LocalStorage

• localStorage的存储大小？
  2.5MB ～ 10MB
• localStorage 有哪些特点？
  1. 只有在相同协议、相同主机名、相同端口下、可以修改同一份localStorage 数据
  2. localStorage 不支持过期时间，需要自己封装。
  3. 理论上localStorage 是永不过期的，但是在移动端的应用上会因为app退出等原因，被清空。所以并不可靠。
  4. localStorage 不支持跨域

indexeddb

• indexeddb的存储大小？
  不少于 250MB

• indexeddb 特性
  indexeddb是异步的不会阻断浏览器的运行，支持事务、不支持跨域操作、可保存二进制文件（视频、图片）、支持索引。

• indexeddb有众多接口
  学习indexeddb就需要了解它的各种接口操作。
  常见接口有：
  数据库：IDBDatabase 对象
  对象仓库：IDBObjectStore 对象
  索引： IDBIndex 对象
  事务： IDBTransaction 对象
  操作请求：IDBRequest 对象
  指针： IDBCursor 对象
  主键集合：IDBKeyRange 对象
  学习indexeddb：https://wangdoc.com/javascript/bom/indexeddb.html

• indexeddb有一个特别的参数version 版本号，当对数据库本身进行修改的时候需要修改version参数 ，默认为1，比如修改数据库的索引、创建删除表、修改表结构都需要先升级version参数依次+1。只允许递增。在封装的时候需要注意verison版本号的设计。

• 关于兼容，在实际业务中，在较低的手机版本中会不支持，如果对兼容比较要求高的话。需要调研清楚兼容问题，尤其是在客户端的应用中ios8-9.3 客户端是完全不支持的。

  
  
  图片1.png