UndoRedo: Logging every single stage versus logging only the action?

I'm developing a canvas graphical editor.

I have already coded an undo-redo system that is based on logging the action in an array, like:开发者_开发百科

HistoryLog=[ [action,objectid,data].... ['move','object1',[50,50]],['rotate','object2',60]... ]

Lately I'm converting the whole code into OOP and optimizing some of the stuff on the go.

A friend of mine offered me to use the localstorage feature of HTML5 and log the whole innerHTML of the canvas on every single action.

It sounded like a good solution to me, because it would save me from lots of coding. Because in my array based logging code I have to code undo-redo functions for each action ( create, move, rotate, delete, etc.)

But in case of logging innerHTML into localstorage, the size of the logged data gets really bigger. And in my application I need to reanimate the editing process step by step after the user finishes editing. So I'll have to save... let's say like a 300 KB of data into a database for each editing.

Plus, I'll have to limit the step amount that is to be logged which might cause losing a part of the editing process.

Should I go with the array based logging?

Cons
• undo-redo function coding for each action

Pros
• Small data size (unlimited logging)

or Should I switch to localstorage logging?

Cons
• Big data size (limited logging is a must)

Pros
• Just one undo-redo function to switch innerHTML

I'm afraid to waste my time on coding the wrong method.

Edit: I just came up with an idea. Maybe I should just log the HTML of the canvas element that is changed? I mean like this for instance:

<rect id="object1" x="391" y="128" width="50" height="50" r="0" rx="0" ry="0" fill="#0000ff" stroke="none" style="opacity: 1;" opacity="1" transform="rotate(80, 416, 153)"/>

The step structure would be like

{ objectID, html}

I recommend you to use localstorage. I have already used one of my applications, and even if the data is hundreds of kilobytes, there is no lag on my browser.

I think your saved data on localstrorage is not a problem, but if you have more than 100 KB HTML data and write this data innerHTML, it might be a little lag during the swiching innerHTML process.

In this case, you can save only your changed element's HTML data. Maybe you will have to write a few more functions, but it's absolutely faster than the first option.