Caching using jQuery, caching jQuery Sortable objects

Question

Okay, so I am quite new to jQuery. I have been messing with a little bit here and there and getting used to it. I am finally getting it (it is not as hard as some might assume). So, given this link: http://jqueryui.com/sortable/#display-grid, I have made a grid, that allows for the users to 'move' the object around on a List.

My question is this. How do I make the jQuery stay in the cache? Example of my code is below. I want to make it to where, let us say that the user moves the #sortable number '4' into the #sortable number '8' position etc. That on the next page load, the browser remembers where the number '4' was moved to, and keeps it there (until the cache is cleared of course). This way, if a user moves stuff around, then they dont have to move it around, every time the page loads.

I've been working on making a fully repsonsive, draggable and sortable Joomla 3.2 template, and have gotten everything down except the cache issue. As of now, you can move module positions around, but every time the page reloads, you have to move them again which gets very very tedious.

I have looked into HTML5's LocalStorage method, but a unsure of how to implement it. Maybe jQuery has a way to handle this? The CSS ID I want to save is the #sortable ID 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>

              <li class="ui-state-default">4</li>

              <li class="ui-state-default">5</li>

              <li class="ui-state-default">6</li>

              <li class="ui-state-default">7</li>

              <li class="ui-state-default">8</li>

              <li class="ui-state-default">9</li>

              <li class="ui-state-default">10</li>

              <li class="ui-state-default">11</li>

              <li class="ui-state-default">12</li>

              <li class="ui-state-default">13</li>

              <li class="ui-state-default">14</li>

              <li class="ui-state-default">15</li>

              <li class="ui-state-default">16</li>

              <li class="ui-state-default">17</li>

              <li class="ui-state-default">18</li>

            </ul>

        </div>

    </body>

</html>

CSS:

body {
    background: url('http://ajadmin.com/jQuery_Site/images/bgimg.jpg');
}
.container{
    width:800px;
    height:auto;
    min-height:350px;
    border:1px solid #555555;
    /*border-radius*/
    -webkit-border-radius:4px;
       -moz-border-radius:4px;
            border-radius:4px;
    background:#ffffff;
    padding:10px;
    margin:auto;
}
.sortable{
    list-style-type:none;
    width:90%;
    margin:auto;
    padding:0;
}
.sortable li{
    margin:3px;
    padding:6px;
    float:left;
    width:100px;
    height:90px;
    font-size:4em;
    text-align:center;
    border:1px solid #e7e7e7;
    background-image:linear-gradient(to top, #F2F2F2 0%, #E3E3E3 100%);
    /*border-radius*/
    -webkit-border-radius:4px;
       -moz-border-radius:4px;
            border-radius:4px;
    cursor:move;
}
#sortable li:hover{
    margin:3px;
    padding:6px;
    float:left;
    width:100px;
    height:90px;
    font-size:4em;
    text-align:center;
    border:1px dashed #fbffbf;
    background-image:linear-gradient(to top, #F5F7D4 0%, #E6E8C7 100%);
    /*border-radius*/
    -webkit-border-radius:4px;
       -moz-border-radius:4px;
            border-radius:4px;
    cursor:move;
}

JS:

 $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  });

score 0 · Accepted Answer · edited May 23 '17 at 12:29

0

localstorage.anyname = [ x1, y1, x2, y2, ... xn, yn ]

Or

localstorage.anyname = "{ el1: [x1,y1], el2: [x2,y2], ... eln: [xn,yn] }"

Or use the cookie: How do I set/unset cookie with jQuery?

edited May 23 '17 at 12:29

Community

1
1

answered Feb 12 '14 at 09:20

VoidVolker

969
1
7
12

Does this store the "sorted" data into the cookies? And if so, how exactly do I implement this into my code? (As I said I am new to JQ) Thanks in advance =) – JasonN Feb 12 '14 at 09:20
"localstorage" save the data into the local file. Just select all elements and save they pair id/class:[x,y]. – VoidVolker Feb 12 '14 at 09:31
you can't save objects in `localStorage` - only strings. You should use `JSON.stringify` and `JSON.parse` to safely store structured data in `localStorage`. – Alnitak Feb 12 '14 at 09:36
VoidVolker: Would localstorage.sortable= [ ui-state-default ] be the corect sytnax in my case? Sorry in advance, this process is so new to me =P and Alnitak, can you provide me a reference for this, or some code examples please =) I appreciate all the help guys... – JasonN Feb 12 '14 at 09:38

Caching using jQuery, caching jQuery Sortable objects

1 Answers1