I have a `<div contenteditable="true" />` that the user can write in that is pretty much unlimited in length.  

The data in the div is saved on change with a timestamp in a MySQL database.

Now my goal is to have a little note on the left that tells the user when each part of the document has been created (resolution should be in days).

Now, the question is: **How can I save the information (what part has changed when) best?**

I considered the following options so far which both seem improvable:

1. Every time the user visits the site at the end of the document I insert a flag (e.g. an emtpy span with a class and a data attribute that stores the start of editing). This flag is then saved into the database when the save script is called. This option would make it very easy to show the date on the side - I would just put them on the same height as the empty span and the span tells me the date. Downsides are: The user might accidently delete the timestamp span and if the user doesn't close the window for a long time no new timespan spans are inserted (this could probably be avoid by inserting new timestamp spans every X minutes so the deleting part is more relevant)
2. Trying to do a string diff comparision each time the data is passed to the saving script and only save the diff with a timestamp. Then when the page is loaded put all parts together in the right order and in Javascript put the date notes in the right place. This sounds like a lot of overhead for me though + when older parts are changed two parts could become one, etc. All in all this options sounds very complicated.

Any input / ideas / suggestions highly appreciated!