前端本地缓存知识：indexDB、localStorage、sessionStorage

前端缓存

在实习的时候接触过一个需求是，要求用户在离线状态下也能打开客户端查看部分数据，并对数据进行操作，在联网后向服务器同步操作更新服务器的数据。因此在对前端如何实现在本地存储数据及读写进行调研，了解到以下的技术。（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,设置主键为iddb_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.resultoldData.age = 30const 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();