526互联

记录一下前端缓存分类汇总(indexDB、localStorage、sessionStorage)

发布时间 2023-09-21 20:36:29作者: ajajaz

什么是缓存?

当我们第一次访问网站的时候，比如 juejin.cn，电脑会把网站上的图片和数据下载到电脑上，当我们再次访问该网站的时候，网站就会从电脑中直接加载出来，这就是缓存。

缓存的优点和应用场景

Web缓存种类：indexDB、localStorage、sessionStorage。

  1. 缓解服务器压力，不用每次都去请求某些数据了。

  2. 提升性能，打开本地资源肯定会比请求服务器来得快。

  3. 减少带宽消耗，当我们使用缓存时，只会产生很小的网络消耗，至于为什么打开本地资源也会产生网络消耗，下面会有说明。

indexDB

介绍

首先indexDB是一个运行在浏览器的非关系型数据库，作为一个数据库，它存储的数据量就是没有上线的，同时它不仅可以存储字符串，还可以存储二进制数据。

主要特点

  1. 键值对存储：indexDB内部采用对象仓库存放数据。所有类型的数据都可以直接存入，包括Javascript对象。在仓库中，数据以键值对的形式进行保存，每一个数据记录都有对应的主键，且主键是独一无二的，不能有重复。
  2. 异步： indexDB操作时是异步操作，不会锁死浏览器，用户在操作indexDB数据库时，可同时进行其他操作（页面渲染等），相比于localStorage的同步操作相比，有利于在大量数据进行读写操作时，避免影响网页的性能。
  3. 支持事务：IndexDB支持事务，支持在数据库操作失败后，整个事务取消，数据库会回滚到之前的状态，有利于保证数据的安全与完整性。
  4. 同源限制：IndexDB收到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能跨域访问。
  5. 支持二进制储存：IndexDB不仅可以存储字符串，还可以储存二进制树（ArrayBuffer对象和Blob对象）。
  6. 储存空间大：indexDB由于是数据库，所以存储量比一般方式要大很多，一般来说不少于250MB。

基本概念

  1. 数据库（IDBDatabase对象）：数据库是一系列相关数据的容器。每个域名（严格的说，是协议+域名+端口）都可以新建任意多个数据库，但他的版本的概念，同一时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或主键），只能通过升级数据库版本完成。
  2. 对象仓库（IDBObjectStore对象）每个数据库包含若干个对象仓库。它类似于关系型数据库的表格。
  3. 索引（IDBIndex）:为了加速数据的检索可以在对象仓库里面，为不同的属性建立索引。
  4. 事务（IDTransaction对象）：数据记录的读写和删除，都要通过事务完成。对象提供error、abort和complete三个监听事件监听操作结果。
  5. 操作请求（IDBRequest对象）。
  6. 指针（IDBCursor对象）。
  7. 主键集合（IDBKeyRange对象）。

代码示列

定义数据库初始变量

var db = null;
var db_table = null;
var databaseName = 'indexDB';
var version = 1;
var tableData = [{  //待存入数据
      id:1,
      name:'张一',
      age:  1,
      address:'西安'
  }]

打开数据库

/*
*@databaseName 数据仓库的名字
*@version 数据仓库的版本
*/
window.indexDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; //获取浏览器支持的indexDB数据库
var request = window.indexedDB.open(databaseName, version);
 
/*
*数据仓库打开失败
*/
request.onerror = function (error){
     console.log('IndexDB打开失败',error);
}
 
/*
*数据仓库打开成功
*/
request.onsuccess = function (res){
     db = res.target.result; //打开成功后用变量db存储数据库对象
}
 
/*
*数据仓库升级事件(第一次新建库是也会触发，因为数据仓库从无到有算是升级了一次)
*/
request.onupgradeneeded = function (res){
     db = res.target.result;
     //在数据库中创建表group,设置主键为id
     db_table = db.createObjectStore('tableA', { keyPath: 'id' });  
     //创建索引indexName指向表中的name字段且设为唯一值，不能重复
     db_table.createIndex('indexName', 'name', { unique: false });
}

存储数据

  • 写入数据需要新建一个事务，新建时必须指定表格名称和操作模式
/*
*新建事务
*@params 数据仓库的数组
*@params 写入模式，readwrite写入操作，为空时表示只读
*@objectStore对应数据库中的表
*/
var store = db.transaction(['tableA'], 'readwrite').objectStore('tableA');

/*
*add方法添加数据
*@params 需要添加的数据信息
*/
var transaction = store.add(tableData);//将上面创建的数据加入数据库
/*
*添加成功
*/
transaction.onsuccess = function (event) {
    console.log('数据添加成功',event);
};
/*
*添加失败
*/
transaction.onerror = function (event) {
    console.log('数据添加失败',event);
};

读取数据

  • 读取数据也是通过事务完成的
/*
*新建事务
*@params 数据仓库的数组
*/
var store = db.transaction(['tableA']).objectStore('tableA');

/*
*get方法获取数据
*@params 数据的主键
*/
var transaction = store.get(1); 
/*
*获取成功
*/
transaction.onsuccess = function (event) {
    if(event.target.result){
        console.log('数据获取成功',event);
    }
    else{
        console.log('未获取到数据');
    }
};

/*
*获取失败
*/
transaction.onerror = function (event) {
    console.log('数据获取失败',event);
};

更新表中的数据

  • 更新数据要使用 IDBObject.put()方法
/*
*新建事务
*@params 数据仓库的数组
*@params 写入模式
*/
var store = db.transaction(['tableA']).objectStore('tableA');
/*
*put方法根据主键更新数据
*@params 数据的主键
*/
var transaction = store .get(1);

transaction.onsuccess = function(event){
	let oldData = event.target.result
	oldData.age = 30
	const update = store.put(oldData)
	update.onerror=function(err){
		console.log(err)
	}
	update.onsuccess = function(event){
		console.log('完成更新')
	}
}

删除数据

var transaction = db.transaction(["tableA"], "readwrite")
                .objectStore("tableA")
                .delete("1");//按主键删除
transaction.onsuccess = function(event) {
  // It's gone!
};
transaction.onerror = function(event) {
  // It's gone!
};

使用索引

/*
*新建事务
*@params 数据仓库的数组
*/
var store = db.transaction(['tableA']).objectStore('tableA');

/*
*index方法获取索引对象
*get方法获取数据
*@params 数据的索引
*/
var request = store.index('indexName').get('张四'); 

/*
*获取成功
*/
request.onsuccess = function (event) {
     console.log('通过索引获取数据成功',event);
};

/*
*获取失败
*/
request.onerror = function (event) {
    console.log('通过索引获取数据失败',event);
};

使用指针遍历表中的所有值


var objectStore = db.transaction("tableA").objectStore("tableA");

objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
    cursor.continue();
  }
  else {
    console.log("No more entries!");
  }
};

//另一种遍历方式
objectStore.getAll().onsuccess = function(event) {
  console.log("Got all objects" + event.target.result);
};
  • 限定函数范围介绍（截图自MDN官方文档）
    image
  • 指定光标的范围和方向
/*
*openCursor参数
*params1 用来控制指针显示的范围，为null时不做任何限制
*@params2 表示指针遍历的的方向
	"next": 光标显示所有记录，包括重复记录。它从键范围的下限开始向上移动（按键的顺序单调递增）。
	"nextunique": 光标显示所有记录，不包括重复记录。如果存在多个具有相同键的记录，则仅检索第一个迭代的记录。它从键范围的下限开始向上移动。
	"prev": 光标显示所有记录，包括重复记录。它从键范围的上限开始向下移动（按键的顺序单调递减）。
	"prevunique": 光标显示所有记录，不包括重复记录。如果存在多个具有相同键的记录，则仅检索第一个迭代的记录。它从键范围的上限开始向下移动。
*/
var index = objectStore.index("indexName");
const range = IDBKeyRange.bound(1,10);//遍历id从1到10的数据
index.openCursor(boundKeyRange).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    cursor.continue();
  }
};

实际使用(localForage)

什么是 localForage

localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。

localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile)。

安装

npm install localforage

API 使用

localForage 提供回调 API 同时也支持 ES6 Promises API.

回调 API 形式

localforage.setItem('key', 'value', function (err) {
  // if err is non-null, we got an error
  localforage.getItem('key', function (err, value) {
    // if err is non-null, we got an error. otherwise, value is the value
  });
});

ES6 Promises 形式

localforage.setItem('key', 'value').then(function () {
  return localforage.getItem('key');
  }).then(function (value) {
    // we got our value
  }).catch(function (err) {
    console.log(err);
});

或使用 async / await 形式

try {
    const value = await localforage.getItem('somekey');
    console.log(value);
} catch (err) {
    console.log(err);
}

多个实例

createInstance 创建并返回一个 localForage 的新实例。每个实例对象都有独立的数据库，而不会影响到其他实例

var store = localforage.createInstance({
  name: "nameHere"
});

var otherStore = localforage.createInstance({
  name: "otherName"
});

// 设置某个数据仓库 key 的值不会影响到另一个数据仓库
store.setItem("key1", "value1");
otherStore.setItem("key2", "value2");

image

总结

在indexDB中，可以创建多个数据库，数据库中可以创建多张表，每张表中可以存储多条数据，当需要存储的数据复杂度高且数据量大时建议使用indexDB。

localStorage

  • localStorage可以实现永久存储，即使浏览器关闭了数据依然存在，在下次打开浏览器访问网站时仍然可以使用。而且在同源下数据多窗口状态也能共享。但是大多数浏览器限制localStorage的的大小为5M左右。
  • localStorage存储数据也是以键值对的形式进行保存的，且任何格式在存储时都会转为字符串格式。

用法

//保存数据
loaclStorage.setItem('name','whyweplay')
loaclStorage.setItem('name','whyweplay123') //重复对一个键进行赋值时会覆盖上一次保存的值

//读取数据
const name = localStorage.getItem('name')

//删除数据
localStorage.removeItem('name')

//清除localStorage中的全部数据
localStorage.clear()

//获取localStorage中的键
localStorage.key(index) //index表示第几个存入localStorage

//监听localStorage的的变化,当键值改变或clear()时会触发

window.addEventListener('storage', wacthHandler, false)
const watchHandler = function(e){
	console.log('监听到新值为'+e.newValue)
}

sessionStorage

  • sessionStorage与localStorage功能基本一致，区别是sessionStorage里面的数据会在页面会话结束时被清除。在打开多个相同页面的url的Tabs页面，会创建各自的sessionStorage。

用法

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();