remember the highlighted text in html page(add annotation to html page)

Question

Hi, I have an HTML file, i am opening it with webkit,i want to develop an app, such that after opening it, i should be able to select some text and make it highlighted(say by pressing some button 'highlight text' ). And it should remember the highlighted text so that when i open it next time it should highlight the same text automatically...which information i got to store so that i can highlight the same in the next time ? any library is available which makes my work simple?

Answer 1

If you want something to be persistent across browser navigation, you can store the information in an hidden INPUT field:

<input type="hidden" id="persistentValue" />

Then use some JQuery code to check it and take action:

$(document).ready(function() { 
    var persistentValue = $("#persistentValue").val();
    if (persistentValue && persistentValue != "") {
         //Highlight the text again
    }
}); 

And to store the text highlight (once you have determined it), use:

$("#persistentValue").val("your value here");

This way, if you navigate away from your page and go back, the INPUT values are restored and your text gets highlighted again.

Answer 2

If you want to "remember" some text \ highlight even after user have closed his browser and then came back later, you should use cookies (store all necessary values there). Some examples: http://www.quirksmode.org/js/cookies.html

Answer 3

In regard to text selection, you can use the answer to this question : http://stackoverflow.com/questions/2477192/use-javascript-to-extend-a-dom-range-to-cover-partially-selected-nodes/2477306#2477306. You have to figure out a way to serialize/deserialize the Range information, probably by storing the selected text in a cookie and then, on page reload, by looking for it in the document and recreating the Range by hand.