使用jQuery緩存，緩存jQuery可排序對象

好吧，所以我對jQuery相當陌生。我一直在這裏和那裏搞一點，並習慣它。我終於明白了（這不像一些人可能認爲的那樣困難）。所以，給定這個鏈接：http://jqueryui.com/sortable/#display-grid，我已經創建了一個網格，它允許用戶在列表中移動對象。使用jQuery緩存，緩存jQuery可排序對象

我的問題是這樣的。我如何讓jQuery留在緩存中？我的代碼示例如下。我想讓它到達哪裏，讓我們說，用戶將#sortable號碼移動到#sortable號碼的'8'位置等。在下一頁加載時，瀏覽器記住號碼'4'被移動到的位置，並將它保留在那裏（直到緩存被清除）。這樣，如果用戶移動東西，那麼每次頁面加載時都不必移動它。

我一直在努力製作一個完全可動的，可拖動的和可排序的Joomla 3.2模板，並且除緩存問題外都得到了一切。到目前爲止，您可以移動模塊位置，但每次頁面重新加載時，都必須再次移動它們，這非常繁瑣。

我研究過HTML5的LocalStorage方法，但不確定如何實現它。也許jQuery有辦法處理這個？我想要保存的CSS ID是以下CSS中的#sortable ID。

HTML標記：

<!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(); 
    });

來源

2014-02-12 JasonN

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

或者

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

或者使用cookie：How do I set/unset cookie with jQuery?

來源

2014-02-12 09:20:10 VoidVolker

這個商店的「分類」數據到餅乾？如果是這樣，我該如何將它實現到我的代碼中？（正如我所說我是JQ新手）在此先感謝=） – JasonN

「localstorage」將數據保存到本地文件中。只需選擇所有元素並保存它們對id/class：[x，y]。 – VoidVolker

您無法將對象保存在'localStorage'中 - 僅限字符串。您應該使用'JSON.stringify'和'JSON.parse'來安全地將結構化數據存儲在'localStorage'中。 – Alnitak

使用jQuery緩存，緩存jQuery可排序對象

回答

相關問題