Persisting the changes of range objects after selection in HTML

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/

Code:

var saveSelection, restoreSelection;if (window.getSelection && document.createRange) {    saveSelection = function(containerEl) {        var range = window.getSelection().getRangeAt(0);        var preSelectionRange = range.cloneRange();        preSelectionRange.selectNodeContents(containerEl);        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);        range.collapse(true);        var nodeStack = [containerEl], node, foundStart = false, stop = false;        while (!stop && (node = nodeStack.pop())) {            if (node.nodeType == 3) {                var nextCharIndex = charIndex + node.length;                if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {                    range.setStart(node, savedSel.start - charIndex);                    foundStart = true;                }                if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {                    range.setEnd(node, savedSel.end - charIndex);                    stop = true;                }                charIndex = nextCharIndex;            } else {                var i = node.childNodes.length;                while (i--) {                    nodeStack.push(node.childNodes[i]);                }            }        }        var sel = window.getSelection();        sel.removeAllRanges();        sel.addRange(range);    }} else if (document.selection) {    saveSelection = function(containerEl) {        var selectedTextRange = document.selection.createRange();        var preSelectionTextRange = document.body.createTextRange();        preSelectionTextRange.moveToElementText(containerEl);        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.moveToElementText(containerEl);        textRange.collapse(true);        textRange.moveEnd("character", savedSel.end);        textRange.moveStart("character", savedSel.start);        textRange.select();    };}

Using character offsets doesn't work if the cursor is at the beginning of a new paragraph. The approach below walks the DOM node and counts all nodes towards the offset. It also handles start and end individually to make sure that the selection remembers its exact position. Here is an updated version that I use in a major project (see functions at end):

/* Gets the offset of a node within another node. Text nodes are counted a n where n is the length. Entering (or passing) an element is one offset. Exiting is 0. */var getNodeOffset = function(start, dest) {  var offset = 0;  var node = start;  var stack = [];  while (true) {    if (node === dest) {      return offset;    }    // Go into children    if (node.firstChild) {      // Going into first one doesn't count      if (node !== start)        offset += 1;      stack.push(node);      node = node.firstChild;    }    // If can go to next sibling    else if (stack.length > 0 && node.nextSibling) {      // If text, count length (plus 1)      if (node.nodeType === 3)        offset += node.nodeValue.length + 1;      else        offset += 1;      node = node.nextSibling;    }    else {      // If text, count length      if (node.nodeType === 3)        offset += node.nodeValue.length + 1;      else        offset += 1;      // No children or siblings, move up stack      while (true) {        if (stack.length <= 1)          return offset;        var next = stack.pop();        // Go to sibling        if (next.nextSibling) {          node = next.nextSibling;          break;        }      }    }  }};// Calculate the total offsets of a nodevar calculateNodeOffset = function(node) {  var offset = 0;  // If text, count length  if (node.nodeType === 3)    offset += node.nodeValue.length + 1;  else    offset += 1;  if (node.childNodes) {    for (var i=0;i<node.childNodes.length;i++) {      offset += calculateNodeOffset(node.childNodes[i]);    }  }  return offset;};// Determine total offset length from returned offset from rangesvar totalOffsets = function(parentNode, offset) {  if (parentNode.nodeType == 3)    return offset;  if (parentNode.nodeType == 1) {    var total = 0;    // Get child nodes    for (var i=0;i<offset;i++) {      total += calculateNodeOffset(parentNode.childNodes[i]);    }    return total;  }  return 0;};var getNodeAndOffsetAt = function(start, offset) {  var node = start;  var stack = [];  while (true) {    // If arrived    if (offset <= 0)      return { node: node, offset: 0 };    // If will be within current text node    if (node.nodeType == 3 && (offset <= node.nodeValue.length))      return { node: node, offset: Math.min(offset, node.nodeValue.length) };    // Go into children (first one doesn't count)    if (node.firstChild) {      if (node !== start)        offset -= 1;      stack.push(node);      node = node.firstChild;    }    // If can go to next sibling    else if (stack.length > 0 && node.nextSibling) {      // If text, count length      if (node.nodeType === 3)        offset -= node.nodeValue.length + 1;      else        offset -= 1;      node = node.nextSibling;    }    else {      // No children or siblings, move up stack      while (true) {        if (stack.length <= 1) {          // No more options, use current node          if (node.nodeType == 3)            return { node: node, offset: Math.min(offset, node.nodeValue.length) };          else            return { node: node, offset: 0 };        }        var next = stack.pop();        // Go to sibling        if (next.nextSibling) {          // If text, count length          if (node.nodeType === 3)            offset -= node.nodeValue.length + 1;          else            offset -= 1;          node = next.nextSibling;          break;        }      }    }  }};exports.save = function(containerEl) {  // Get range  var selection = window.getSelection();  if (selection.rangeCount > 0) {    var range = selection.getRangeAt(0);    return {      start: getNodeOffset(containerEl, range.startContainer) + totalOffsets(range.startContainer, range.startOffset),      end: getNodeOffset(containerEl, range.endContainer) + totalOffsets(range.endContainer, range.endOffset)    };  }  else    return null;};exports.restore = function(containerEl, savedSel) {  if (!savedSel)    return;  var range = document.createRange();  var startNodeOffset, endNodeOffset;  startNodeOffset = getNodeAndOffsetAt(containerEl, savedSel.start);  endNodeOffset = getNodeAndOffsetAt(containerEl, savedSel.end);  range.setStart(startNodeOffset.node, startNodeOffset.offset);  range.setEnd(endNodeOffset.node, endNodeOffset.offset);  var sel = window.getSelection();  sel.removeAllRanges();  sel.addRange(range);};

This only works on modern browsers (IE 9+ at least).

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.