title: How can I save a range object (from getSelection) so that I can reproduce it on a different page load?
body: <p>I am trying to make a web app which allows the user to select some text on a page, and then with the click of another button highlight it. When the user goes back to the page, I want the highlight to show up in the same spot as well.</p>
  
  <p>So I've gotten as far as:</p>
  
  <pre><code>var selectedRange = document.getSelection().getRangeAt(0);
  highlightRange(selectedRange);
  </code></pre>
  
  <p>Where highlightRange is a function that highlights the range. This works so far.</p>
  
  <p>The problem is, I need a way to save the selectedRange into a database so that it can be fetched again later. After that, I need to re-create the range from this data and highlight it again. I've found this method:</p>
  
  <pre><code>document.createRange();
  </code></pre>
  
  <p>From this page here: <a href="https://developer.mozilla.org/en-US/docs/Web/API/range" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/range</a></p>
  
  <p>But I'm not really sure how I can make this work</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I know I'll need to re-create the range from scratch afterwards. And to do that I will use something like this:</p>
  
  <pre><code>var range = document.createRange();
  
  range.setStart(startNode,startOffset);
  range.setEnd(endNode,endOffset);
  </code></pre>
  
  <p>I can easily store startOffset and endOffset because those are just numbers. But startNode and endNode are node objects. I don't know how to store this in a database?</p>
  
  <p>More specifically, I need to store the <em>reference</em> to the node in a database.</p>