浏览器缓存

• 浏览器端存储 API： cookie、localStorage、sessionStorage、IndexedDB
• 源专用文件系统（Origin Private File System，简称 OPFS）

cookie

• 数据会以字符串键值对的形式存储在本地，数据会自动的传递到服务器
• cookie设置的过期时间之前一直有效
• cookie数据大小不能超过4k
• 与服务端通信时，每次都会携带在请求中的 header 中，影响安全和请求的性能

sessionStorage

• 数据会以字符串键值对的形式存储在本地
• 数据在当前浏览器窗口关闭后自动删除
• 数据大小不能超过 5M
• 如果存储的 value 是对象或数据，最好使用 JSON.stringify()转化，拿的时候 JSON.parse()即可
• 使用：
  • 存储：window.sessionStorage.setItem(‘key’,’value’)
  • 获取：window.sessionStorage.getItem(‘key’)
  • 删除对应 key 中的数据：window.sessionStorage.removeItem(‘key’)
  • 删除所有保存的数据：window.sessionStorage.clear()
• 注：
  • 如果存储的 value 是对象或数据，最好使用JSON.stringify()转化，拿的时候JSON.parse()即可
  • getItem(xxx)，如果 xxx 对应的 value 获取不到，那么 getItem 的返回值是 null
  • JSON.parse(null)的结果依然是 null

localStorage

• 数据会以字符串键值对的形式存储在本地
• 永久存储，浏览器关闭后数据不丢失除非主动删除数据；
• 数据大小不能超过 5M
• 使用：
  • 存储：window.localStorage.setItem('key','value')
  • 获取：window.localStorage.getItem('key')
  • 删除对应 key 中的数据：window.localStorage.removeItem('key')
  • 删除所有保存的数据：window.localStorage.clear()
• 注：
  • 如果存储的 value 是对象或数据，最好使用JSON.stringify()转化，拿的时候JSON.parse()即可
  • getItem(xxx)，如果 xxx 对应的 value 获取不到，那么 getItem 的返回值是 null
  • JSON.parse(null)的结果依然是 null

indexedDB

• 非关系型数据库，数据存储在数据库中
• 除非被清理，否则一直存在
• 通常 数百 MB 到 几 GB
• 术语：
  • 数据库：IDBDatabase 对象
  • 对象仓库：IDBObjectStore 对象 — 相当于数据库中的表
  • 索引：IDBIndex 对象
  • 事务：IDBTransaction 对象 — 数据记录的读写和删改，都要通过事务完成
  • 操作请求：IDBRequest 对象
  • 指针： IDBCursor 对象
  • 主键集合：IDBKeyRange 对象
• 使用:

  • 打开数据库：const request = window.indexedDB.open(databaseName: string, version: number)

  • 定义一个数据库存储对象： let db;

  • 打开数据库成功的处理器： request.onsucess = (event) => { db = event.target.result;}

  • 打开数据库失败的处理器： request.onerror = (event) => { console.error(“数据库错误：”,${event.target.errorCode});}

  • 创建一个新的数据库或者增加已存在的数据库的版本号：

    request.onupgradeneeded = (event) => {
    	const db = event.target.result; // 保存 IDBDatabase 接口
    	const objectStore; // 新建对象仓库
    	if (!db.objectStoreNames.contains('tableName')) { // 判断该数据库是否存在该表，不存在则创建
    		objectStore = db.createObjectStore("tableName", { keyPath: "primary key" })
    	}
    	objectStore.createIndex('indeName', 'indexProperty', { unique: false }) // 新建索引，unique: 是否包含重复的值
    }

  • 新增数据：通过事务完成

const add = () => {
	const request = db.transaction(['tableName'], 'readwrite')
		.objectStore('tableName')
		.add({ primary key: 1, name: 'zhangsan', age:10}) // 添加数据

	request.onsucess = (event) => { console.log('数据写入成功')}
	request.onerror = (event) => { console.log('数据写入失败')}
}
add()

• 读取数据

  const read = () => {
  	const transaction = db.transaction(['tableName'])
  	const objectStore = transaction.objectStore('tableName')
  	const request = objectStore.get(1) // get的参数时主键的值
  
  	request.onerror = (event) => {
  		console.log('事务失败')
  	}
  	request.onsuccess = (event) => {
  		if (request.result) {
  			console.log('Name:' + request.result.name)
  		} else {
  			console.log('未获得数据记录')
  		}
  	}
  }

• 遍历数据

  const readAll = () => {
  	const objectStore = db.transaction('tableName').objectStore('tableName')
  	objectStore.openCursor().onsucess = (event) => {
  		const cursor = event.target.result
  		if (cursor) {
  			console.log('Primary Key:' + cursor.key) // 获取主键
  			console.log('Name:' + cursor.value.name) // 其余键值以这种方式获取
  		} else {
  			console.log('没有更多数据')
  		}
  	}
  }
  readAll()

• 更新数据

  const update = () => {
  	const request = db.transaction(['tableName'],'readwrite')
  		.objectStore('tableName')
  		.put({ primary key: 1, name: 'zhangsan', age:10}) // 自动更新primary key为1的记录
  	request.onsuccess = (event) => { console.log('数据更新成功') }
  	request.onerror = (event) => { console.log('数据更新失败') }
  }
  update()

• 删除数据

  const remove = () => {
  	const request = db
  		.transaction(['tableName'], 'readwrite')
  		.objectStore('tableName')
  		.delete(1) // 通过主键去删除对应的记录
  	request.onsucess = (event) => {
  		conosle.log('数据删除成功')
  	}
  }
  remove()

• 使用索引

  设： 存在objectStore.createIndex('name', 'name', {unique: false})
  取：
  const transaction = db.transaction(['tableName'], 'readonly')
  const store = transacton.objectStore('tableName')
  const index = store.index('name')
  const request = index.get('lisi')
  
  request.onsucess = (e) => {
  	const result = e.target.result
  	if (result) { ... } else { ... }
  }

OPFS

• 存储空间数 GB 到几十 GB，有设备磁盘空间决定。
• 时效性： 持久存储，除非手动清除或用户明确授权清理数据
• 性能：直接对文件操作，支持流式处理，可以在主线程或 web worker 中使用
• API：提供类 Unix 文件系统的 API，如 mkdir、open、close、read、write
• 属于页面私有，用户需通过对应的浏览器插件，查看存储的文件