Fork me on GitHub

前端性能优化与原理实践之【本地储存】

存储:前端性能优化之本地储存 Cookie、Web Storage、IndexedDB!

一、Cookie

因为 HTTP 是无状态的协议,所以客户端的请求,服务端返回一个响应,服务端并不会记录那个客户端发起过请求,所以要想记住客户端的请求,必须设置一个存储,所以 Cookie 诞生了。

1、Cookie 存储大小:Cookie 是有体积上限的,它最大只能有 4KB。如果存储的超过 4 kb,就会被剪裁。

2、Cookie 性能浪费:每个 Cookie 都对应一个域名,Set-Cookie: name=xiuyan; domain=xiaolu.com,请求同一域名,都会带着 Cookie,如果 Cookie 过多,或多或少会带来性能问题。

二、Web Storage

2.1 Local Storage 与 Session Storage 的区别?

  • 生命周期:Local Storage 是持久化的本地存储,只要不手动删除,存储的数据就不会消失;而 Session Storage 是临时性的本地存储,只存在于当前会话中的,一旦 tab 页面关闭,数据就会不存在。
  • 作用域:Local StorageSession StorageCookie都遵循同源策略。Session Storage 不同,只要它们不在同一个浏览器窗口中打开,内容就无法共享。

2.2 应用场景

  • Local Storage:Cookie 无法胜任的存储,都要交给它来完成,一般用于资源的持久化存储。用它来存储一些内容稳定的资源。比如,base64 的商店网站图片。
  • Session Storage: 更适合用来存储生命周期和它同步的会话级别的信息。只用于本次页面会话使用。

三、IndexedDB

IndexedDB 是一个运行在浏览器上的非关系型数据库。理论上可以无限大,但是也是有限制的,可以存储字符串和二进制数据。

3.1 创建 IndexedDB

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 后面的回调中,我们可以通过event.target.result拿到数据库实例
let db
// 参数1位数据库名,参数2为版本号
const request = window.indexedDB.open("xiaoceDB", 1)
// 使用IndexedDB失败时的监听函数
request.onerror = function(event) {
console.log('无法使用IndexedDB')
}
// 成功
request.onsuccess = function(event){
// 此处就可以获取到db实例
db = event.target.result
console.log("你打开了IndexedDB")
}

3.2 创建一个表

1
2
3
4
5
6
7
8
// onupgradeneeded事件会在初始化数据库/版本发生更新时被调用,我们在它的监听函数中创建object store
request.onupgradeneeded = function(event){
let objectStore
// 如果同名表未被创建过,则新建test表
if (!db.objectStoreNames.contains('test')) {
objectStore = db.createObjectStore('test', { keyPath: 'id' })
}
}

3.3 创建事务操作数据库

1
2
3
4
5
6
// 创建事务,指定表格名称和读写权限
const transaction = db.transaction(["test"],"readwrite")
// 拿到Object Store对象
const objectStore = transaction.objectStore("test")
// 向表格写入数据
objectStore.add({id: 1, name: 'xiuyan'})

3.4 监听完成操作

1
2
3
4
5
6
7
8
// 操作成功时的监听函数
transaction.oncomplete = function(event) {
console.log("操作成功")
}
// 操作失败时的监听函数
transaction.onerror = function(event) {
console.log("这里有一个Error")
}