0

I wish to create a local (offline) HTML5 page containing various sized rectangles containing a paragraph of text (and links) that can be repositioned by being dragged by the user. It's not necessary to drop them into any target; simply to drag them. But the page has to remember their final locations and show them there when it is reopened.

I did think of using Canvas to do this but drawing the text in the rectangles is very slow. Better to create a div (with a border) for each paragraph. The closest solution I have found so far is this one, where one drags the "aside". The original page is here.

What code would I need to write to store these locations locally (offline), preferably by self-modifying the HTML page itself? I understand there are localStorage and sessionStorage objects in HTML5 but have not tried using them.

PS This page is for my own use and as I use Firefox I am not interested in other browsers. I would prefer using Javascript to jQuery, but all suggestions will be most welcome.

PS While waiting for a reply, I stumbled across this site:

built with HTML5, CSS3 and JavaScript, the diagrams are created with canvas and offline usage is possible, thanks to ApplicationCache.

Would this be the way to go?

Community
  • 1
  • 1
maximus
  • 165
  • 2
  • 7
  • Possible duplicate of [Storing Objects in HTML5 localStorage](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) – Aaron Hudon Nov 10 '16 at 00:34

1 Answers1

0

You could save the div information (positions and width, (eventually height too)) into the localstorage. When you are reloading the page you just need to get them back out of the localstorage to rerender the whole thing.

jStorage is a simple plugin where you can "speak" to your local storage. You could store an object (serialized) into this and then loop it out on your page load.

Vince V.
  • 3,115
  • 3
  • 30
  • 45