前端缓存
在实习的时候接触过一个需求是,要求用户在离线状态下也能打开客户端查看部分数据,并对数据进行操作,在联网后向服务器同步操作更新服务器的数据。因此在对前端如何实现在本地存储数据及读写进行调研,了解到以下的技术。(PS:本文是对自己的学习过程进行总结)。
1.indexDB
- 首先indexDB是一个运行在浏览器的非关系型数据库,作为一个数据库,它存储的数据量就是没有上线的,同时它不仅可以存储字符串,还可以存储二进制数据。
主要特点
- 1 键值对存储:indexDB内部采用对象仓库存放数据。所有类型的数据都可以直接存入,包括Javascript对象。在仓库中,数据以键值对的形式进行保存,每一个数据记录都有对应的主键,且主键是独一无二的,不能有重复。
- 2 异步: indexDB操作时是异步操作,不会锁死浏览器,用户在操作indexDB数据库时,可同时进行其他操作(页面渲染等),相比于localStorage的同步操作相比,有利于在大量数据进行读写操作时,避免影响网页的性能。
- 3 支持事务:IndexDB支持事务,支持在数据库操作失败后,整个事务取消,数据库会回滚到之前的状态,有利于保证数据的安全与完整性。
- 4 同源限制:IndexDB收到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能跨域访问。
- 5.支持二进制储存:IndexDB不仅可以存储字符串,还可以储存二进制树(ArrayBuffer对象和Blob对象)。
- 6.储存空间大:indexDB由于是数据库,所以存储量比一般方式要大很多,一般来说不少于250MB。
indexDB数据库中的基本概念
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官方文档)
-
指定光标的范围和方向
/*
*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();
}
};
总结
在indexDB中,可以创建多个数据库,数据库中可以创建多张表,每张表中可以存储多条数据,当需要存储的数据复杂度高且数据量大时建议使用indexDB。
2.HTML5中的Web Storage
- web storage存储机制的出现是对于cookie的改善,由于cookie所能存储的数据量十分有限,无法满足业务的需求,所以需要能存储量更大的工具。
2.1 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)
}
2.2 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();