Web应用中富交互的撤销与前进操作的实现方法介绍（代码）

import { Inject } from "@angular/core";
import { IndexedDBAngular } from "indexeddb-angular";
import { Subject, Observer, Observable } from "rxjs";

export interface IDBData {
 widgetList: string
}

// 前进和后退的服务
@Inject({
 providedIn: 'root'
})
export class PanelExtendMoveBackService {

 /**
 * 发射DB集合存储的数据，可订阅
 */
 public launchDBDataValue$: Subject<IDBData> = new Subject<IDBData>()

 /**
 * 创建一个叫panelDataDB的本地数据库，版本号为1
 */
 public db = new IndexedDBAngular('panelDataDB', 1)

 /**
 * 记录前进和后退的存储集合项的下标key
 * 默认为0
 */
 public dbCurrentIndex: number = 0

 /**
 * 自增的DBkey
 */
 public dbKey: number = -1

 // 是否允许前进
 public get isMove() : boolean {
 return this.dbCurrentIndex < this.dbKey
 }
 // 是否允许后退
 public get isBack() : boolean {
 return this.dbCurrentIndex > 0
 }

 constructor() {}

 /**
 * 创建DB集合
 */
 public createCollections(): Observable<boolean> {
 const _sub: Subject<boolean> = new Subject<boolean>()
 this.dbKey = -1
 this.db.createStore(1, (db: any) => {
 db.currentTarget.result.createObjectStore('panelItem')
 }).then(()=>{
 this.dbClear()
 _sub.next(true)
 })
 return _sub.asObservable()
 }

 /**
 * 往集合里添加数据
 * 同时把新添加的key赋值给dbCurrentIndex，
 */
 public dbAdd(): void {
 this.handleDbCurrentRefreshDB();
 this.dbKey += 1;
 // 此处存储你要保存的数据
 const _widget_list = []
 this.db.add('panelItem', { widgetList: JSON.stringify(_widget_list) }, this.dbKey).then(
 _e => {
 if ((<Object>_e).hasOwnProperty('key')) {
 this.dbCurrentIndex = _e.key
 };
 },
 () => {
 this.dbKey -= 1
 throw new Error('添加panelItem集合失败')
 }
 )
 }

 /**
 * 在执行添加数据集操作的时候判断dbCurrentIndex当前指引的下标是否低于dbKey
 * 如果是说明执行了后退操作之后后续动作执行了dbAdd的操作，则清空dbCurrentIndex索引之后的数据重新添加
 */
 public handleDbCurrentRefreshDB(): void {
 if (this.dbCurrentIndex < this.dbKey) {
 for (let i = this.dbCurrentIndex + 1; i <= this.dbKey; i++) {
 this.db.delete('panelItem', i).then(() => {})
 }
 this.dbKey = this.dbCurrentIndex
 }
 }

 /**
 * 执行后退操作发射DB数据集
 */
 public acquireBackDBData(): void {
 if( this.isBack ) {
 this.dbCurrentIndex -= 1
 this.db.getByKey('panelItem', this.dbCurrentIndex).then(res=>{
 this.launchDBDataValue$.next(res)
 },()=>{ })
 }
 }

 /**
 * 执行前进操作发射DB数据集
 */
 public acquireMoveDBData(): void {
 if( this.isMove ) {
 this.dbCurrentIndex += 1
 this.db.getByKey('panelItem', this.dbCurrentIndex).then(res => {
 this.launchDBDataValue$.next(res)
 }, () => { })
 }
 }

 /**
 * 清除DB集合panelItem
 */
 public dbClear(): void {
 this.db.clear('panelItem').then(_e => {})
 }
}