As someone who is relatively new to jQuery, I've been exploring and experimenting with it lately. It's not as daunting as some might think, and I'm starting to grasp it better. For instance, I created a grid that allows users to move objects around on a list using this link: http://jqueryui.com/sortable/#display-grid.
Now, my question is about caching jQuery. Below is an example of my code. I want to keep track of where a user moves items within the #sortable. So, if they, for example, move item '4' to position '8', I want the browser to remember this layout for the next page load until the cache is cleared. This will save users from having to rearrange items every time the page reloads.
I've been working on designing a fully responsive, draggable, and sortable Joomla 3.2 template. Everything works smoothly except for the caching issue. Currently, when you move module positions around, you have to repeat the process after each page reload, which can be tedious.
I considered using HTML5's LocalStorage method but unsure about how to implement it. Is there a way in jQuery to handle this? Specifically, I need to save the CSS ID #sortable indicated in the CSS below.
HTML Markup:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tesing</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://blahblah.com/jQuery_Site/scripts/css/style.css">
<script src="http://blahblah.com/jQuery_Site/scripts/javascript/sortable.js"></script>
</head;
<body>
<div class="container">
<ul id="sortable">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
... (remaining list elements) ...
<li class="ui-state-default">17</li>
<li class="ui-state-default">18</li>
</ul>
</div>
</body>
</html>