如何将范围存储到数据库中

Question

我想将用户选择存储在数据库中，以便在用户下次访问该页面时突出显示它们。

以下是我用于在所选文本周围添加范围的代码。

 window.rangeIntersectsNode = function(range, node) {
    var nodeRange;
    if (range.intersectsNode) {
        return range.intersectsNode(node);
    } else {
        nodeRange = node.ownerDocument.createRange();
        try {
            nodeRange.selectNode(node);
        } catch (e) {
            nodeRange.selectNodeContents(node);
        }

        return range.compareBoundaryPoints(Range.END_TO_START, nodeRange) == -1 && range.compareBoundaryPoints(Range.START_TO_END, nodeRange) == 1;
    }
}

window.getSelectedElementTags = function(win) {
    var range, sel, elmlist, treeWalker, containerElement;
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
        range = sel.getRangeAt(0);
    }

    if (range) {
        containerElement = range.commonAncestorContainer;
        if (containerElement.nodeType != 1) {
            containerElement = containerElement.parentNode;
        }

        treeWalker = win.document.createTreeWalker(
        containerElement, NodeFilter.SHOW_TEXT, function(node) {
            return rangeIntersectsNode(range, node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
        }, false);

        elmlist = [treeWalker.currentNode];
        while (treeWalker.nextNode()) {
            elmlist.push(treeWalker.currentNode);
        }

        return (elmlist);
    }
}

window.wrapInSpan = function(range) {

    var tempElement;
    var selectedArr = getSelectedElementTags(window);
    for (var i = 2; i < (selectedArr.length - 1); i++) {
        tempElement = document.createElement("span");
        tempElement.innerHTML = selectedArr[i].nodeValue;
        selectedArr[i].parentElement.replaceChild(tempElement, selectedArr[i])
    }
    var sC = range.startContainer;
    if (selectedArr.length == 2) {
        if (sC.nodeType == 3) {
            tempElement = document.createElement("span");
            tempElement.innerHTML = sC.nodeValue.substring(range.startOffset, range.endOffset);
            var anc1 = sC.splitText(range.startOffset);
            var anc2 = (anc1.splitText(range.endOffset)).previousSibling;
            anc2.parentElement.replaceChild(tempElement, anc2);
        }
    } else {
        if (sC.nodeType == 3) {
            tempElement = document.createElement("span");
            tempElement.innerHTML = sC.nodeValue.substring(range.startOffset);
            sC.parentElement.insertBefore(tempElement, sC.nextSibling);
            sC.nodeValue = sC.nodeValue.replace(sC.nodeValue.substring(range.startOffset), "");
        }
        var eC = range.endContainer;
        if (eC.nodeType == 3) {
            tempElement = document.createElement("span");
            tempElement.innerHTML = eC.nodeValue.substring(0, range.endOffset);
            eC.parentElement.insertBefore(tempElement, eC);
            eC.nodeValue = eC.nodeValue.replace(eC.nodeValue.substring(0, range.endOffset), "");
        }
    }
}

我使用以下代码来获取选择的详细信息，但是在控制台中我总是将变量视为未定义。

var startNode=range.anchorNode;
    var endNode=range.focusNode;
    var startoffset=range.anchorOffset;
    var endoffset=range.focusOffset;
    var location=[startNode,endNode,startoffset,endoffset];
    console.log(startNode);
    return location;

如果有人可以帮我弄清楚如何存储范围并重新加载它，我将不胜感激。我不打算使用rangy的库，除非它是必需品。此外，我不确定它是否适用于Chrome扩展程序