保存并恢复文本选择（页面重新加载后）

Question

我正在构建一个Web应用程序，允许用户选择并突出显示文本，保存选择，并在下次重新访问同一页面时重新加载选择（突出显示）。我目前正在做的是：

1. 保存选择：

   var selection = window.getSelection();
   var range = selection.getRangeAt(0);
   var rootNode = range.commonAncestorContainer;
   var nodeIndex = $(div).contents().index(rootNode);
   
   var savedData = "("+nodeIndex+":"+range.startOffset+"/"+range.endOffset+")"; 
   //this is what being saved to the backend
   

2. 关于恢复选择：

   //database data being parsed into nodeIndex, startOffset and endOffset
   var node = $(div).contents().eq(nodeIndex);
   var range = document.createRange();
   if (node && node.length >= endOffset) {
        range.setStart(node, startOffset);
        range.setEnd(node, endOffset);
   }
   

上述解决方案有效，只要保存和恢复顺序相同（因为相对于彼此检索nodeIndex，但这也是问题的原因：

上述解决方案无法满足删除一个或多个选项的情况。

如果删除了之前保存的选择，其他选项的nodeIndex将变为false，因此会破坏恢复过程。

有人能建议我解决方案吗？

p / s：通过将div的整个HTML保存到数据库中，实际上可以满足要求，因此我只需要检索不同用户的HTML并显示它。但这种方法对我来说听起来有点不称​​职，并且会占用数据库中更多的空间。或者这真的很好吗？有什么想法吗？