8

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:

  1. Storing a huge variable in js memory.

  2. And applying the changes again a dom will repaint everything.

Is there any way to achieve the same?.

kannanrbk
  • 6,964
  • 13
  • 53
  • 94
  • 2
    as you are using jquery, why not store the cloned dom as a string, then use `.html()` to reinsert. that way you are only storing strings rather then dom fragments. – atmd Feb 25 '15 at 13:00
  • storing html strings isn't memory intensive and is most likely what you would send to server anyway – charlietfl Feb 25 '15 at 13:03
  • contentEditable pages support undo commands, but I don't know how good the browser support for that is – the8472 Feb 25 '15 at 13:07
  • @atmd Is it okay to store a huge html string in js? – kannanrbk Feb 25 '15 at 13:43
  • it's less intensive then storage huge objects, plus I'd argue easier to transport (save to a db via ajax post etc) – atmd Feb 25 '15 at 13:54

3 Answers3

5

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.

jyrkim
  • 2,849
  • 1
  • 24
  • 33
0

You could try using some compression in order to reduce the amount of memory:

Community
  • 1
  • 1
Haroldo_OK
  • 6,612
  • 3
  • 43
  • 80
0

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.

Carlos André Oliveira
  • 340
  • 1
  • 4