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 {

    
    public launchDBDataValue$: Subject<IDBData> = new Subject<IDBData>()

    
    public db = new IndexedDBAngular('panelDataDB', 1)

    
    public dbCurrentIndex: number = 0

    
    public dbKey: number = -1

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

    constructor() {}

    
    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()
    }

    
    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集合失败')
            }
        )
    }

    
    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
        }
    }

    
    public acquireBackDBData(): void {
        if( this.isBack ) {
            this.dbCurrentIndex -= 1
            this.db.getByKey('panelItem', this.dbCurrentIndex).then(res=>{
                this.launchDBDataValue$.next(res)
            },()=>{ })
        }
    }

    
    public acquireMoveDBData(): void {
        if( this.isMove ) {
            this.dbCurrentIndex += 1
            this.db.getByKey('panelItem', this.dbCurrentIndex).then(res => {
                this.launchDBDataValue$.next(res)
            }, () => { })
        }
    }

    
    public dbClear(): void {
        this.db.clear('panelItem').then(_e => {})
    }
}