I am writing a custom HTML editor. User can edit an entire HTML content and the changes will be updated in DOM. We have an option to undo all the changes.
Logic:
Clone an entire container before making change and apply it again.
Disadvantages:
Storing a huge variable in js memory.
And applying the changes again a dom will repaint everything.
Is there any way to achieve the same?.
Your question is very useful. I don’t know what’s the optimal way of handling this situation, but I do know that there is Command Design Pattern that could work in this case. With Command Design Pattern you can undo events that have been saved in your program. To my understanding the trick to use Command Design Pattern is that you need to have functions that do the opposite thing when you need to undo something. For example if you need to undo add function result, you need to have subtract function. For draw function you need to have clear/erase function. Here is JavaScript example.
You could try using some compression in order to reduce the amount of memory:
Use the web storage to keep the DOM history.
Imagine you want to undo the last three actions executed. You shouldn't save it in memory because you can lose information on a page refresh. And you really don't know if this action will be used to save in memory.
You can use the web storage with data compression to keep the smallest amount of data.
.html()to reinsert. that way you are only storing strings rather then dom fragments.