Take the 2-minute tour ×

Is there a way to save the changes like changing the background of HTML text that span over multiple tags so that when it is loaded again the changes made should be reflected in the HTML page.

EDIT: Detailed explanation.

When the HTML page is loaded, the text is selected and highlighted using the range object and the executeCommand:

             document.execCommand("BackColor", false, 'yellow');

The changes (highlighting the text as yellow) remain until the page is reloaded. But when the page is reloaded these changes are not there. What i want is to save somehow these changes like in local DB sqlite so that when page is reloaded/refreshed the changes in HTML page should appear.

Any idea how to do it. Do i need to save its range start offset and end offset which can be used to create range next time the page is loaded. Please give your insights.

share|improve this question
Do you mean per user? –  cowls Dec 19 '12 at 9:25
How are these changes made and by who? –  Christofer Eliasson Dec 19 '12 at 9:25
Sorry to be less precise. I edited my question now. –  Satish Dec 19 '12 at 9:58
add comment

2 Answers

up vote 13 down vote accepted

For each selection, you could serialize the selected range to character offsets and deserialize it again on reload using something like this:

Demo: http://jsfiddle.net/WeWy7/3/


var saveSelection, restoreSelection;

if (window.getSelection && document.createRange) {
    saveSelection = function(containerEl) {
        var range = window.getSelection().getRangeAt(0);
        var preSelectionRange = range.cloneRange();
        preSelectionRange.setEnd(range.startContainer, range.startOffset);
        var start = preSelectionRange.toString().length;

        return {
            start: start,
            end: start + range.toString().length

    restoreSelection = function(containerEl, savedSel) {
        var charIndex = 0, range = document.createRange();
        range.setStart(containerEl, 0);

            if (node.nodeType == 3) {
                var nextCharIndex = charIndex + node.length;
                    range.setStart(node, savedSel.start - charIndex);
                    foundStart = true;
                    range.setEnd(node, savedSel.end - charIndex);
                    stop = true;
                charIndex = nextCharIndex;
            } else {
                var i = node.childNodes.length;
                while (i--) {

        var sel = window.getSelection();
} else if (document.selection) {
    saveSelection = function(containerEl) {
        var selectedTextRange = document.selection.createRange();
        var preSelectionTextRange = document.body.createTextRange();
        preSelectionTextRange.setEndPoint("EndToStart", selectedTextRange);
        var start = preSelectionTextRange.text.length;

        return {
            start: start,
            end: start + selectedTextRange.text.length

    restoreSelection = function(containerEl, savedSel) {
        var textRange = document.body.createTextRange();
        textRange.moveEnd("character", savedSel.end);
        textRange.moveStart("character", savedSel.start);
share|improve this answer
Tim Down: I am not using rangy library. –  Satish Dec 19 '12 at 10:46
@Terry: Ah, sorry, I forgot that answer had some Rangy in. I'll update. –  Tim Down Dec 19 '12 at 10:47
@Terry: Updated. –  Tim Down Dec 19 '12 at 11:20
@ Tim Down: This solution is really very helpful. You are great man. –  Satish Dec 20 '12 at 11:01
@TimDown: There seems to be an issue with the solution in the jsfiddle. If the last character of the editable area is a new line (and the caret is at the new line) and then you save and restore selection, the selection is restored to the end of the previous line. How can this be fixed? –  ashutosh Sep 18 '13 at 17:48
show 5 more comments

Without knowing more about the context, it is hard to give an exact answer, but yes it would be possible, but it will be quite complex for most cases. Depending on the usecase, there are a few ways to go.

Cookies or Local storage

You could use some sort of client-side storage (cookies, local storage or similar) and save information about what elements were modified and how. Whenever the page is reloaded you read that storage and apply the changes. How to implement it will depend on how those changes are made, and will be to0 extensive to cover in a single SO-answer I'm afraid.

Server-side storage

If you know who each user is (you have some form of authentication), whenever they change the appearance of something (however that is made), you make an ajax-request to the server and save those changes to a database. On every subsequent page load, you would then have to check what use is making the request, do a lookup in your database to see if they've made any changes, and in that case apply them accordingly.

Common for both the client- and server-side storage solutions is that they will be quite extensive to implement I believe.

Browser plugin

Another way to go would be to make use of plugins like Greasemonkey for Firefox that allow the user to customize the way a webpage is rendered. Those customizations will be persistent across page loads.

share|improve this answer
Local storage would be the option because its a offline application. –  Satish Dec 19 '12 at 10:11
add comment

Your Answer


