在HTML中select后继续改变范围对象
有没有办法保存更改，如更改跨越多个标记的HTML文本的背景，以便再次加载时所做的更改应反映在HTML页面中。
编辑：详细的解释。
加载HTML页面时，使用范围对象和executeCommandselect并突出显示文本：
document.execCommand("BackColor", false, 'yellow'); 更改（将文本突出显示为黄色）一直保留到重新加载页面。 但是，当页面重新加载时，这些更改不存在。 我想要的是保存在本地数据库sqlite这样的变化，以便页面重新加载/刷新时应该出现的HTML页面的变化。
任何想法如何做到这一点。 我是否需要保存其下一次加载页面时可用于创build范围的范围起始偏移量和结束偏移量。 请给你的见解。
对于每一个select，你可以序列化所选范围字符偏移量，并重新反序列化使用像这样的东西：
演示： 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.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(); }; }
在不了解情况的情况下，很难给出确切的答案，但是可以的，但是在大多数情况下这将是相当复杂的。 取决于用例，有几种方法可以去。
Cookies或本地存储
你可以使用某种客户端存储（cookies，本地存储或类似的），并保存有关哪些元素被修改以及如何修改的信息。 无论何时重新加载页面，您都可以读取该存储并应用更改。 如何实现它将取决于如何做出这些改变，并将广泛覆盖在一个单一的SO答案恐怕。
服务器端存储
如果你知道每个用户是谁（你有某种forms的authentication），每当他们改变某个东西的外观时（不pipe做了什么），你向服务器发出一个ajax请求，并将这些改变保存到数据库中。 在随后的每个页面加载中，您都必须检查请求的用途，在数据库中查看是否进行了任何更改，并在这种情况下对其进行相应的应用。
客户端和服务器端存储解决scheme的共同之处在于它们将相当广泛地实现，我相信。
浏览器插件
另一种方法是利用像Firefox的Greasemonkey这样的插件，允许用户自定义网页的呈现方式。 这些定制将在页面加载时保持不变。
如果光标位于新段落的开头，则使用字符偏移不起作用。 下面的方法遍历DOM节点并计算所有节点的偏移量。 它还单独处理开始和结束，以确保select记住它的确切位置。 这里是我在一个主要项目中使用的更新版本（见最后的函数）：
/* Gets the offset of a node within another node. Text nodes are counted an 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 node var 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 ranges var 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); };
这只适用于现代浏览器（至lessIE 9+）。
