Thought I would make a turorial so I remember what I learned from you all ,
and to pass on your wisdom. Hope this helps someone :)

Try this: 
------------------------------------------------------------------------------------------------------------------------

1) Type something into "Copy this into Pre" textarea box . 
Then click "Copy this into Pre" Button .
Text is copied into "Restore this from Pre" "pre area ' . 
And "Copy this into Pre" textarea box , is Cleared .

Study This : function saveItAll() 
------------------------------------------------------------------------------------------------------------------------

2) The click on "Restore this from Pre" Button , 
Text is copied from "Restore this from Pre"  area  
into  "Copy this into Pre" area .
And "Restore this from Pre"  area  , is Cleared .

Study This: function restoreItAll()
------------------------------------------------------------------------------------------------------------------------

3) Now Type something into "Copy this into Pre" textarea box Again . 
Then click "Copy this into Pre" Button .
Text is copied into "Restore this from Pre" pre area . 
And "Copy this into Pre" textarea box , is Cleared . 

But this time , click the "Save This Page" Button .

Study This: function saveAs(filename, allHtml) 

This .html page will be saved in your Browser's download area .
Since the "Restore this from Pre" pre area , is coded as  contenteditable="true" , 
the downloaded page will save the "pre area" text as innerHTML . 
A nifty feature of  'contenteditable' is  
that upon opening the saved-page the content of "pre area"  is now " hardCoded " into page . 

Study This: function onloadRestoreTextarea() 
------------------------------------------------------------------------------------------------------------------------

See code :
So in the  ' body '  tag we have :  "onloadRestoreTextarea()"  
which runs the  " function onloadRestoreTextarea() " code , when page is loaded . 
Which copies text from "pre area" to " textarea" box . 

Also at  ' body onload="documentURL() ' page load time: 
The function:  function documentURL()   is run ,
which copies ' this .html '  file's address  into the ' title ' tag . 

BTW:  for example (see code) and note that :
IF you want to copy what’s typed in the box use .value .
console.log(toConsoleLogId.value); 

IF you want what was hardcoded into the text box’s HTML , use .innerHTML .
console.log(toConsoleLogId.innerHTML); 

Hope this helps someone....
http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html