UndoRedo：記錄每個階段與只記錄動作？

我已經編碼是基於日誌的操作在數組中，喜歡撤消，重做系統：

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

我最近在整個代碼轉換成OOP和優化一些東西去吧。

我的一個朋友向我提供了使用HTML5的本地存儲的本地存儲功能，並在每一次操作中記錄整個畫布的innerHTML。

這聽起來像是一個很好的解決方案，因爲它會讓我從很多編碼中解脫出來。因爲在基於數組的日誌記錄代碼中，我必須爲每個動作（創建，移動，旋轉，刪除等等）編寫撤消 - 重做功能。

但是，如果將innerHTML記錄到localstorage中，記錄數據的大小會得到真的更大。並且在我的應用程序中，我需要在用戶完成編輯後逐步重新編輯處理。所以我必須保存...比方說，每個編輯的數據庫都需要300 KB的數據。

另外，我將不得不限制要記錄的步驟數量，這可能會導致失去部分編輯過程。

我應該與基於數組的日誌記錄？

缺點對於每個動作

優點
小數據大小（無限記錄）

或我應該切換到localStorage的測井
撤消-重做功能編碼？

缺點
大數據大小（限記錄是必須的）

優點
只是一個撤消，重做功能切換的innerHTML

我怕浪費我的時間編碼錯誤的方法。

編輯：我剛想出一個主意。也許我應該只記錄被更改的canvas元素的HTML？我的意思是這樣的，例如：

<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)"/>

梯級結構會像

{ objectID, html}

來源

2011-07-25 Ahmet Yildirim

我建議你使用localStorage的。我已經使用了我的一個應用程序，即使數據是幾百KB，我的瀏覽器也沒有任何延遲。

我認爲您在localstrorage上保存的數據不是問題，但是如果您有超過100個 KB HTML數據並將此數據寫入innerHTML，則在開始處理innerHTML過程中可能會有點滯後。

在這種情況下，您只能保存更改元素的HTML數據。也許你將不得不多寫幾個函數，但它比第一個選項快得多。

來源

2011-07-25 00:17:16

UndoRedo：記錄每個階段與只記錄動作？

回答

相關問題