It cannot impact performance significantly, if you do it right. The reason should be pretty obviously. Let's say, the user goes into some "editing session" which is ended by either committing changes, or cancelling them all together. But the user cannot physically edit so many text values in one session to that extend where the reverting them to the original values can take any noticeable time.
But of course you still get into trouble if you do it in some silly way; for example, if you preserve the copy of all data which is accessible for modification; if the number of such control is huge (which however itself would be a sign of questionable application design), and if you preserve the values of all of them, I can imagine that it would take too much time, and also the system memory.
But it won't be ever a problem if you preserve the data selectively. How? In a pretty simple way: on each control, handle the
change
event:
https://developer.mozilla.org/en-US/docs/Web/Events/change[
^].
If the event is invoked in some input control, its value might be changed. (I say "might" because it's possible that you, say edit some text and then restore it manually to the same value as before editing; but let's consider such control as "modified", too, with some redundancy.) If not, there is no need to preserve the value. So, you have some collection object representing the "change set". When you capture the
change
event on some control, first add the reference to the control and its current value to the change set object, each value coming with its unique key, such as the control
id
. At the end of the session, you will need to restore the values on Cancel. Now, remember that JavaScript objects provide
time complexity of O(1) for search of the object by key. The biggest object I testes the JavaScript performance with was the dictionary with 65513 entries; and the performance if the search by the key was blazing fast, the delay cannot even be noticed by a human. You will traverse through all the key properties of the change set object, get the object reference by the key and value by the value and restore it. It will take no time.
There are couple of problems here: 1) the event is not invoked immediately; you need, in particular, move the keyboard focus out of it, 2) the event is handled when new value is already entered, so, essentially, you loose original value. First one is not really a problem, because you only need this functionality before you use the changed value. Both problems can be solved by using shadow values for all controls. Say, you can add a new property
shadowValue
to each control and update it from "real"
value
property on each change. This way, you will have the "previous" value stored in
shadowValue
.
And this is the basic JavaScript functionality; you don't need any libraries.
Now, alternative approach is to use
transactional feature of the database. Start transaction, use the data-bound control to change the database data, of change modify it based on UI states in any other way, and on Cancel roll back.
—SA