Remembering previous entry

I have the following code that allows me to click on a link and change the existing word to the word that is clicked on. I want to add an undo option and can't figure out a way to do that. There may be many new words and they may vary with the loading of the page. I could do the undo in php but can't see a way in javascript. Is this possible? Any suggestions?

function replaceword ( newword, prevword, id )
{
  myOldString = document.getElementById(id).value;
  var prevall = new RegExp(prevword, 'g');
  var myNewString = myOldString.replace(prevall, newword);
  document.getElementById(id).value = myNewString;
}
 </script>
 
 echo '<td><a href="javascript:replaceword('. "'" . $newword . "', '" . $oldword . "', '" . $id . "'" . ')">' . $newword . '</a></td>';

Code (markup):

 

Try to do it by keeping the values in an arrays like this example:

var strings_history = new Array();
var history_pointer = 0;

function replaceword ( newword, prevword, id )
{
  myOldString = document.getElementById(id).value;
  strings_history[history_pointer] = myOldString;
  history_pointer++;
  var prevall = new RegExp(prevword, 'g');
  var myNewString = myOldString.replace(prevall, newword);
  document.getElementById(id).value = myNewString;
}

function undo(id){
  document.getElementById(id).value = strings_history[history_pointer-1];
  history_pointer = history_pointer-1;
}

Code (JavaScript):

 

Use cookies and retrieve retrieve it when the visitor clicks undo. You might want to save the time as well.

 

Thank you both for the suggestions. I implemented the undo code and it works perfectly. I truly appreciate the help.

 

I've ran into a problem with this project. The provided undo code works perfectly. But I needed to have it work for multiple textareas on the page so what I did was add the script and the code to handle it in php block of code and then included that where necessary. Something like

 <script type="text/javascript">
var strings_history = new Array();
var history_pointer = 0;

function replaceword ( newword, prevword, id )
{
  myOldString = document.getElementById(id).value;
  strings_history[history_pointer] = myOldString;  
  history_pointer++;  
  var prevall = new RegExp(prevword, 'g');
  var myNewString = myOldString.replace(prevall, newword);
  document.getElementById(id).value = myNewString;
}

function undo(id){  
  if (strings_history[history_pointer-1] != null) {
     document.getElementById(id).value = strings_history[history_pointer-1]; 
     history_pointer = history_pointer-1;
  }
  else {
     alert("Undo buffer is empty");
  }
} 
</script>
 
 echo '<td><a href="javascript:replaceword('. "'" . $newword . "', '" . $oldword . "', '" . $id . "'" . ')">' . $newword . '</a></td>';
 echo '<td><a href="javascript:undo('. "'" . $i . "'" . ')">Undo</a></td>';

Code (markup):

And then I call the above like this:

 
 $id = 0;
 include module
 <taxtarea id=<?php echo $id; ?>></textarea>

Code (markup):

But I need to call it like this:

 
 for ($id = 0; $id < 5; ++$id) {
 include module
 <taxtarea id=<?php echo $id; ?>></textarea>
}

Code (markup):

When I try that, the undo pointer gets confused and the wrong textarea is undone. I tried making the undo array a multi-array keyed to the id but it doesn't work. I don't know if that is due to incorrect javascript code or some other mistake I'm making. I'm pretty sure the strings_history pointer is handled incorrectly but don't see how to fix that. The altered javascript is below. Would someone please take a look and let me know if there are any mistakes?

<script type="text/javascript">
var strings_history = new Array();
var strings_history[<?php echo $i; ?>] = new Array();
var history_pointer = 0;

function replaceword ( newword, prevword, id, word_id )
{
  myOldString = document.getElementById(id).value;
  strings_history[id][history_pointer] = myOldString;  
  history_pointer++;  
  var prevall = new RegExp(prevword, 'g');
  var myNewString = myOldString.replace(prevall, newword);
  document.getElementById(id).value = myNewString;
}

function undo(id){ 
  if (strings_history[id][history_pointer-1] != null) {
     document.getElementById(id).value = strings_history[id][history_pointer-1]; 
     history_pointer = history_pointer-1;
  }
  else {
     alert("Undo buffer is empty");
  }
} 
</script>

Code (markup):