在web应用中，用户在执行一些丰富的交互操作时，不可避免地会出现误操作，比如在富文本编辑器中设置错误的字体颜色，在做H5活动页面时不小心删除了一张图片，在设计原型应用在线时不小心删除了一个页面。简而言之，在复杂交互场景的情况下，用户误操作的可能性非常高，然后有“撤销”和“转发”两种操作

思考

不考虑任何场景中的web应用，用户的每一个操作都可以看作是改变某个组件或对象的状态和属性。一旦连续动作操作完成，下一个动作准备就绪，当前状态就是全新的状态。

A——B——C

用户不操作时，全局状态为a。

用户操作一个组件，将其移动到x位置，松开鼠标后，全局状态为b。

用户操作另一个组件删除，完成后全局状态为C

所以撤销操作就是当用户的操作状态达到C时，将全局状态返回到B，返回到最后一个操作。

然后，您需要一个可以存储如此大量状态的列表或索引来记录每个操作的操作

但是如果我用一个数组变量来存储这么庞大的数据量，是不是有点不合适？数据量越大内存应该爆炸吧？所以在这里我建议你使用索引数据库

下面是一个由Angular、Rxjs和IndexedDB封装的服务类

从“@angular/core”导入{ Inject }；

从“indexeddb-angular”导入{ indexed banglar }；

从“rxjs”导入{Subject，Observer，Observable }；

exportinterfaceIDBData{

widgetList:string

}

//前向和后向服务

@注入({

providedIn: ' root '

})

exportclass panel extendmovebackservice {

/**

*传输数据库集合中存储的数据，可订阅

*/

publicatlaunchddatavalue $ : subjectiddata=newsubjectiddata()

/**

*创建一个名为panelDataDB的本地数据库，版本号为1

*/

public db=new indexed banglar(' panel datadb '，1)

/**

*记录向前和向后存储集项目的下标键

*默认值为0

*/

publicatdbcurrentindex : number=0

/**

*自DBkey的增加

*/

publicdbKey:number=-1

//允许它前进吗

publicgetisMove():boolean{

returnthis . dbcurrentindexthis . dbkey

}

//允许退吗

publicgetisBack():boolean{

returnthis.dbCurrentIndex0

}

constructor(){}

/**

*创建数据库集合

*/

publiccreateCollections(): observableboolean {

const _ sub : subjectboolean=newSubjectboolean()

this.dbKey=-1

this.db.createStore(1，(db:any)={

db . CurrentTarget . result . CreateObjectStore('面板项目')

}).然后(()={

this.dbClear()

_sub.next(真)

})

return_sub.asObservable()

}

/**

*向集合中添加数据

*同时，将新添加的密钥分配给dbCurrentIndex，

*/

publicdbAdd():void{

this . handledbcurrentfreshdb()；

this . DBkey=1；

//在此存储您要保存的数据

const_widget_list=[]

this.db.add('镶板项目'，{ Widgetlist : JSon . stringify(_ widget _ list)}，this.dbKey)。然后(

_e={

if((Object_e)。hasown property(' key '){

this.dbCurrentIndex=_e.key

};

},

()={

this.dbKey-=1

抛出新错误('未能添加面板项目集合')

}

)

}

/**

*执行添加数据集操作时，判断dbCurrentIndex当前指导的下标是否低于dbKey

*如果是指在执行后向操作后的后续动作中执行dbAdd，则清空dbCurrentIndex索引后会重新添加数据。

*/

public handledbcurrentfreshdb(): void {

if(this . dbcurrentindexthis . dbkey){

for(leti=this . DBcurrentindex 1；i=this.dbKeyi ){

this.db.delete('镶板项目'，I)。然后(()={})

}

this.dbKey=this.dbCurrentIndex

}

}

/**

*执行反向操作以传输数据库数据集

*/

publicatackerbackdbdata(): void {

if(this.isBack){

this.dbCurrentIndex-=1

this.db.getByKey('镶板项目'，this.dbCurrentIndex)。然后(res={

this.launchDBDataValue $。下一个(res)

},()={})

}

}

/**

*执行转发操作以传输数据库数据集

*/

publicatacuremovedbdata(): void {

if(this.isMove){

this.dbCurrentIndex=1

this.db.getByKey('镶板项目'，this.dbCurrentIndex)。然后(res={

this.launchDBDataValue $。下一个(res)

},()={})

}

}

/**

*清除数据库集合面板项目

*/

publibclear(): void {

this.db.clear('镶板项目')。然后(_e={})

}

}

本文转载自中文网