在HTML中选择后，保持范围对象的更改

Question

在HTML中选择后，保持范围对象的更改有没有办法保存更改，例如更改跨越多个标记的HTML文本的背景，以便在再次加载时，所做的更改应反映在HTML页面中。编辑：详细解释。加载HTML页面时，使用范围对象和executeCommand选择并突出显示文本：             document.execCommand("BackColor", false, 'yellow');更改（将文本突出显示为黄色）保留，直到重新加载页面。但是当重新加载页面时，这些更改不存在。我想要的是以某种方式保存这些更改，如在本地数据库sqlite中，以便在重新加载/刷新页面时，应显示HTML页面中的更改。知道如何做到这一点。我是否需要保存其范围起始偏移量和结束偏移量，可以在下次加载页面时用于创建范围。请提供您的见解。

Answer 1

如果光标位于新段落的开头，则使用字符偏移不起作用。下面的方法遍历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 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);};

这仅适用于现代浏览器（至少IE 9+）。

Answer 2

在不了解更多关于上下文的情况下，很难给出确切的答案，但是是的，这是可能的，但对于大多数情况来说这将是非常复杂的。根据用例，有几种方法可以使用。

Cookie或本地存储

您可以使用某种客户端存储（cookie，本地存储或类似存储），并保存有关修改了哪些元素以及如何修改元素的信息。每当重新加载页面时，您都会读取该存储并应用更改。如何实施它将取决于这些变化是如何进行的，并且我将在一个单一的SO答案中进行广泛的讨论。

服务器端存储

如果您知道每个用户是谁（您有某种形式的身份验证），那么每当他们更改某些内容（无论如何）时，您都会向服务器发出ajax请求并将这些更改保存到数据库中。在每个后续页面加载时，您必须检查发出请求的用途，在数据库中进行查找以查看它们是否进行了任何更改，并在这种情况下相应地应用它们。

客户端和服务器端存储解决方案的共同之处在于，我相信它们的实现范围非常广泛。

浏览器插件

另一种方法是使用像Greasemonkey for Firefox这样的插件，允许用户自定义网页的呈现方式。这些自定义将在页面加载中保持不变。