Discard domain changes in JS

Question

I am writing my own HTML editor. The user can edit all HTML content and the changes will be updated in the DOM. We have the opportunity to undo all changes.

Logics:

Before making changes, complete the cloning of the entire container and apply it again.

Disadvantages:

• Saving a huge variable in js memory.

• And applying the changes again, dom will repaint everything.

Is there any way to achieve the same?

Answer 1

Your question is very helpful. I don’t know what is the best way to handle this situation, but I know that there is a command design pattern that could work in this case. With the command design template, you can undo events that have been saved in your program. As I understand it, the trick to using the command design pattern is that you need to have functions that do the opposite when you need to undo something. For example, if you need to cancel adding the result of a function, you must have a subtraction function. For the drawing function, you need to have a wipe / erase function. Here is a javascript example .

Answer 2

You can try using some compression to reduce the amount of memory:

• http://pieroxy.net/blog/pages/lz-string/index.html
• http://code.google.com/p/jslzjb/
• JavaScript line compression

Answer 3

Use web storage to save DOM history.

Imagine that you want to undo the last three actions performed. You do not have to store it in memory, because you may lose page refresh information. And you really don't know if this action will be used to store in memory.

You can use web storage with data compression to store the smallest amount of data.