title: Saving positions of draggable elements with custom user generated content
body: <p>What would be the better path to take if I were in need of storing dynamically created content, which when inserted into the page, will have a pre-defined position within a container?</p>
  
  <p>To make it a little more simpler to understand, say a user types something into an input box, which turns out to be a YouTube URL. Once he/she hits enter I take the URL and create an embedded video and add it to the page within a container of class name <code>box</code>. <strong>This is the dynamic content</strong>.</p>
  
  <p>This box can also be dragged using jQuery-ui, so the position will not always be the same. Now if I were to reload the page, I need the page to look exactly as it did before it reloaded, including the position and dynamically created content by the user.</p>
  
  <p>I understand there are probably a number of ways to do such a thing, but there <em>are</em> limitations. Because there is no server available to store this information with, I am limited to using:</p>
  
  <ul>
  <li>localStorage</li>
  <li>Web SQLite</li>
  </ul>
  
  <p>It's also worth mentioning that this will be used in a Google Chrome Extension.</p>
  
  <p>So my question is, what would be the best way to store this kind of information given the limitations?</p>
  
  <p><sub>Example with what I'm working with here: <a href="http://goo.gl/92Mya" rel="nofollow">http://fiddle.jshell.net/Shaz/pfs8a/30/show/light/</a></sub></p>