I'm diving into the world of localStorage and trying to figure out how it works.
To get a better understanding, I decided to create an HTML page that allows users to drag and drop tiles around the screen.
Here's a snippet of the code I came up with:
<script type="text/javascript">
function drag_start(event){
var style = window.getComputedStyle(event.target, null);
var str = (parseInt(style.getPropertyValue("left")) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top")) - event.clientY)+ ',' + event.target.id;
event.dataTransfer.setData("Text",str);
event.stopPropagation();
}
// More functions for handling drag and drop
</script>
I believe that by incorporating a line similar to the one above starting with "localStorage," I can store the position after each drop action. Of course, this is just a simplified example for now.
My current challenge lies in retrieving the saved positions from localStorage when the page loads again.
Take, for instance, one of the draggable tiles like this:
<div id="tile3" draggable="true" ondragstart="drag_start(event)">
<a href="http://www.link.somewhere">
Link
</a>
</div>
The tile has a CSS property of style="position:absolute", so I need to fetch the offset data from localStorage and apply it as a property of the div.
But how exactly do I go about doing this last step?