在localStorage中存储多个文本选择

Question

我正在研究允许用户突出显示网页上的文本的Chrome扩展。很简单，但它是为了帮助我学习。现在，我陷入困境，寻找如何最好地解决问题。

目前，我可以突出显示在页面上保留的选定文本。

的JavaScript

function addHilite(color) { 
    var range, sel = window.getSelection(); 
    if (sel.rangeCount && sel.getRangeAt) { 
     range = sel.getRangeAt(0); 
    } 
    document.designMode = "on"; 

    if (range) { 
     sel.addRange(range); 
    }; 

    if (!document.execCommand("hiliteColor", false, "#FFFF00")) { 
     document.execCommand("backColor", false, "#FFFF00"); 
    } 
    document.designMode = "off"; 
    console.log(range); 
} 

我试图让一个点，用户可以选择突出显示的范围，并使用相同的浏览器操作撤消一大亮点。我认为localStorage将是一个很好的方式来保存每次点击之间的状态，但我不知道如何将多个范围存储为一个字符串作为参考。有一个更好的方法吗？

localStorage实验

function sel() { 
    var getText = window.getSelection().toString(); 
    localStorage.setItem('getText', JSON.stringify(getText)); 

    console.log(JSON.parse(localStorage.getItem('getText'))); 
} 

Answer 1

你的意思是这样的？

var selections = []; 

function sel() { 
    var getText = window.getSelection().toString(); 
    selections.push(getText); 
    localStorage.setItem('getText', selections); 

    console.log(localStorage.getItem('getText')); 
}