有没有办法保存更改，例如更改跨越多个标签的 HTML 文本的背景，以便在再次加载时所做的更改应反映在 HTML 页面中。
编辑：详细解释。
加载 HTML 页面时，使用 range 对象和 executeCommand 选择并突出显示文本：
document.execCommand("BackColor", false, 'yellow');
更改（将文本突出显示为黄色）将一直保留到重新加载页面。但是当页面重新加载时，这些更改不存在。我想要以某种方式保存这些更改，例如在本地 DB sqlite 中，以便在重新加载/刷新页面时应该出现 HTML 页面中的更改。
任何想法如何做到这一点。我是否需要保存其范围开始偏移量和结束偏移量，以便在下次加载页面时创建范围。请给出你的见解。
对于每个选择，您可以将所选范围序列化为字符偏移量，并在重新加载时使用如下所示再次反序列化：
演示：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();
};
}
如果光标位于新段落的开头，则使用字符偏移不起作用。下面的方法遍历 DOM 节点并将所有节点计入偏移量。它还单独处理开始和结束，以确保选择记住其确切位置。这是我在一个主要项目中使用的更新版本（见最后的功能）：
/*
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 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);
};
这仅适用于现代浏览器（至少 IE 9+）。
在不了解上下文的情况下，很难给出准确的答案，但是有可能，但对于大多数情况来说，这将是相当复杂的。根据用例，有几种方法可以使用。
Cookie 或本地存储
您可以使用某种客户端存储（cookies、本地存储或类似的）并保存有关修改了哪些元素以及如何修改的信息。每当重新加载页面时，您都会读取该存储并应用更改。如何实施它将取决于这些更改是如何进行的，并且恐怕会在单个 SO-answer 中广泛涵盖。
服务器端存储
如果您知道每个用户是谁（您有某种形式的身份验证），那么无论何时他们更改某物的外观（无论如何进行），您都会向服务器发出 ajax 请求并将这些更改保存到数据库中。在每次后续页面加载时，您必须检查发出请求的用途，在您的数据库中查找以查看他们是否进行了任何更改，并在这种情况下相应地应用它们。
客户端和服务器端存储解决方案的共同点是我相信它们的实施范围非常广泛。
浏览器插件
另一种方法是使用像Greasemonkey for Firefox这样的插件，允许用户自定义网页的呈现方式。这些自定义将在页面加载时保持不变。