Jquery 保存列表的新顺序

我试图将我的listview的新订单保存到Cookie中，这样用户就可以按照自己的意愿对列表进行排序。下一次他们打开我的页面列表时的顺序与他们离开页面时的顺序相同。这可能吗

我使用jQuery Mobile，并通过以下方式对列表进行排序：

    $(document).ready(function() {
    $('li').taphold(function() {
      // the clicked LI
      var clicked = $(this);

      // all the LIs above the clicked one
      var previousAll = clicked.prevAll();

      // only proceed if it's not already on top (no previous siblings)
      if(previousAll.length > 0) {
        // top LI
        var top = $(previousAll[previousAll.length - 1]);

        // immediately previous LI
        var previous = $(previousAll[0]);

        // how far up do we need to move the clicked LI?
        var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

        // how far down do we need to move the previous siblings?
        var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

        // let's move stuff
        clicked.css('position', 'relative');
        previousAll.css('position', 'relative');
        clicked.animate({'top': -moveUp});
        previousAll.animate({'top': moveDown}, {complete: function() {
          // rearrange the DOM and restore positioning when we're done moving
          clicked.parent().prepend(clicked);
          clicked.css({'position': 'static', 'top': 0});
          previousAll.css({'position': 'static', 'top': 0}); 
        }});
      }
    });
  });

当用户点击并按住列表项时，该项将移动到列表的顶部

+我的页面也必须能够脱机使用。

更新：

如何获取新列表的链接？ 现在我有这样一个：

JS

$('#home').live('pageinit', function(event) {
    // Check if we have saved the list order
    getListOrder();

    $('li').taphold(function() {
        // the clicked LI
        var clicked = $(this);

        // all the LIs above the clicked one
        var previousAll = clicked.prevAll();

        // only proceed if it's not already on top (no previous siblings)
        if (previousAll.length > 0) {
            // top LI
            var top = $(previousAll[previousAll.length - 1]);

            // immediately previous LI
            var previous = $(previousAll[0]);

            // how far up do we need to move the clicked LI?
            var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

            // how far down do we need to move the previous siblings?
            var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

            // let's move stuff
            clicked.css('position', 'relative');
            previousAll.css('position', 'relative');
            clicked.animate({
                'top': -moveUp
            });
            previousAll.animate({
                'top': moveDown
            }, {
                complete: function() {
                    // rearrange the DOM and restore positioning when we're done moving
                    clicked.parent().prepend(clicked);
                    clicked.css({
                        'position': 'static',
                        'top': 0
                    });
                    previousAll.css({
                        'position': 'static',
                        'top': 0
                    });
                    saveListOrder();
                }
            });
        }
    });

    $('#resetLO').click(function() {
        resetListOrder();
    });

    $('#clearLS').click(function() {
        clearLocalStorage();
    });
});

function saveListOrder() {
    var $items = $('#theList li');

    $items.each(function(i) {
        //alert('Order:' +$(this).attr('rel')+' I: '+i); // This is your rel value
        // save the index and the value
        localStorage.setItem(i, $(this).attr('rel'));
    });
}

function getListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var item;

    // check for localStorage
    if(localStorage.getItem(0) == null) {
        return; // use default list order
    }        

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        item = localStorage.getItem(i);

        // create new list order
        list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');
    });
    list.listview('refresh');    
}

function resetListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var next;

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        next = i + 1;
        list.append('<li rel="'+next+'"><a href="#">List Item #'+next+'</a></li>');
    });  
    list.listview('refresh');     
}

function clearLocalStorage() {
    // remove  all saved data
    localStorage.clear();     
}

$（'#home'）.live（'pageinit'，函数（事件）{
//检查是否已保存列表顺序
getListOrder（）；
$（'li'）.tapphold（函数（）{
//李先生
var clicked=$（这个）；
//单击的一个上方的所有LIs
var previousAll=单击。previousAll（）；
//仅当它尚未位于顶部时才继续（没有以前的同级）
如果（以前的all.length>0）{
//李克强
var top=$（previousAll[previousAll.length-1]）；
//前一位李
var previous=$（previousAll[0]）；
//我们需要向上移动多远？
var moveUp=clicked.attr（'offsetTop'）-top.attr（'offsetTop'）；
//我们需要把以前的兄弟姐妹搬到多远的地方？
var moveDown=（clicked.offset（）.top+clicked.outerHeight（））-（previous.offset（）.top+previous.outerHeight（））；
//我们搬东西吧
css（'position'，'relative'）；
css（'position'，'relative'）；
动画({
“顶部”：-moveUp
});
使生动活泼({
“顶部”：向下移动
}, {
完成：函数（）{
//移动完毕后，重新排列DOM并恢复定位
单击.parent（）.prepend（单击）；
点击.css({
“位置”：“静态”，
“顶部”：0
});
previousAll.css({
“位置”：“静态”，
“顶部”：0
});
saveListOrder（）；
}
});
}
});
$（'#resetLO'）。单击（函数（）{
resetListOrder（）；
});
$（'#clearLS'）。单击（函数（）{
clearLocalStorage（）；
});
});
函数saveListOrder（）{
var$items=$（“#列表li”）；
$items.每个（功能（i）{
//警报（'Order:'+$（this）.attr（'rel'）+'I:'+I）；//这是您的rel值
//保存索引和值
setItem（i，$（this.attr（'rel'））；
});
}
函数getListOrder（）{
var列表=$（“#列表”）；
var$items=$（“#列表li”）；
var项目；
//检查本地存储
if（localStorage.getItem（0）==null）{
return；//使用默认列表顺序
}        
//删除上一个列表
list.empty（）；
$items.每个（功能（i）{
item=localStorage.getItem（i）；
//创建新的列表顺序
list.append（“
”）；
});
listview（“刷新”）；
}
函数resetListOrder（）{
var列表=$（“#列表”）；
var$items=$（“#列表li”）；
var-next；
//删除上一个列表
list.empty（）；
$items.每个（功能（i）{
next=i+1；
list.append（“
”）；
});  
listview（“刷新”）；
}
函数clearLocalStorage（）{
//删除所有保存的数据
localStorage.clear（）；
}

HTML

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

</head>
<body>
<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-theme="g" id="theList">
            <li rel="1"><a href="http://www.example1.com">List Item #1</a></li>
            <li rel="2"><a href="http://www.example2.com">List Item #2</a></li>
            <li rel="3"><a href="http://www.example3.com">List Item #3</a></li>
            <li rel="4"><a href="http://www.example4.com">List Item #4</a></li>
            <li rel="5"><a href="http://www.example5.com">List Item #5</a></li>
            <li rel="6"><a href="http://www.example6.com">List Item #6</a></li>
            <li rel="7"><a href="http://www.example7.com">List Item #7</a></li>
            <li rel="8"><a href="http://www.example8.com">List Item #8</a></li>
            <li rel="9"><a href="http://www.example9.com">List Item #9</a></li>
            <li rel="10"><a href="http://www.example10.com">List Item #10</a></li>
        </ul>
        <br />
        <a href="#" data-role="button" id="resetLO">Reset List Order</a>
        <a href="#" data-role="button" id="clearLS">Clear Local Storage</a>
    </div>
</div>
</body>
</html>

当我重新排列列表并保存它时，它会将链接更改为“#”

示例：我将Item3移到列表的顶部，这样每个项目的链接都会更改->#

---

所以我想应该把旧的清单清理干净，然后再把整个清单列出来。所以我想我必须改变这一行，但我不知道怎么做<代码>列表。追加（“

”）

对于HTML5，我会看看本地存储

更新：

下面是一个使用本地存储的示例

• （重新加载列表顺序）

JS

$（'#home'）.live（'pageinit'，函数（事件）{
//检查是否已保存列表顺序
getListOrder（）；
$（'li'）.tapphold（函数（）{
//李先生
var clicked=$（这个）；
//单击的一个上方的所有LIs
var previousAll=单击。previousAll（）；
//仅当它尚未位于顶部时才继续（没有以前的同级）
如果（以前的all.length>0）{
//李克强
var top=$（previousAll[previousAll.length-1]）；
//前一位李
var previous=$（previousAll[0]）；
//我们需要向上移动多远？
var moveUp=clicked.attr（'offsetTop'）-top.attr（'offsetTop'）；
//我们需要把以前的兄弟姐妹搬到多远的地方？
var moveDown=（clicked.offset（）.top+clicked.outerHeight（））-（previous.offset（）.top+previous.outerHeight（））；
//我们搬东西吧
css（'position'，'relative'）；
css（'position'，'relative'）；
动画({
“顶部”：-moveUp
});
使生动活泼({
“顶部”：向下移动
}, {
完成：函数（）{
//重新排列DOM，并在需要时恢复定位
$('#home').live('pageinit', function(event) {
    // Check if we have saved the list order
    getListOrder();

    $('li').taphold(function() {
        // the clicked LI
        var clicked = $(this);

        // all the LIs above the clicked one
        var previousAll = clicked.prevAll();

        // only proceed if it's not already on top (no previous siblings)
        if (previousAll.length > 0) {
            // top LI
            var top = $(previousAll[previousAll.length - 1]);

            // immediately previous LI
            var previous = $(previousAll[0]);

            // how far up do we need to move the clicked LI?
            var moveUp = clicked.attr('offsetTop') - top.attr('offsetTop');

            // how far down do we need to move the previous siblings?
            var moveDown = (clicked.offset().top + clicked.outerHeight()) - (previous.offset().top + previous.outerHeight());

            // let's move stuff
            clicked.css('position', 'relative');
            previousAll.css('position', 'relative');
            clicked.animate({
                'top': -moveUp
            });
            previousAll.animate({
                'top': moveDown
            }, {
                complete: function() {
                    // rearrange the DOM and restore positioning when we're done moving
                    clicked.parent().prepend(clicked);
                    clicked.css({
                        'position': 'static',
                        'top': 0
                    });
                    previousAll.css({
                        'position': 'static',
                        'top': 0
                    });
                    saveListOrder();
                }
            });
        }
    });

    $('#resetLO').click(function() {
        resetListOrder();
    });

    $('#clearLS').click(function() {
        clearLocalStorage();
    });
});

function saveListOrder() {
    var $items = $('#theList li');

    $items.each(function(i) {
        //alert('Order:' +$(this).attr('rel')+' I: '+i); // This is your rel value
        // save the index and the value
        localStorage.setItem(i, $(this).attr('rel'));
    });
}

function getListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var item;

    // check for localStorage
    if(localStorage.getItem(0) == null) {
        return; // use default list order
    }        

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        item = localStorage.getItem(i);

        // create new list order
        list.append('<li rel="'+item+'"><a href="#">List Item #'+item+'</a></li>');
    });
    list.listview('refresh');    
}

function resetListOrder() {
    var list   = $("#theList");
    var $items = $('#theList li');
    var next;

    // remove the previous list
    list.empty();

    $items.each(function(i) {
        next = i + 1;
        list.append('<li rel="'+next+'"><a href="#">List Item #'+next+'</a></li>');
    });  
    list.listview('refresh');     
}

function clearLocalStorage() {
    // remove  all saved data
    localStorage.clear();     
}

<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet"  href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
    <script src="http://jquerymobile.com/test/js/jquery.js"></script>
    <script src="http://jquerymobile.com/test/js/jquery.mobile.js"></script>

</head>
<body>
<div data-role="page" id="home">
    <div data-role="content">

        <ul data-role="listview" data-theme="g" id="theList">
            <li rel="1"><a href="#">List Item #1</a></li>
            <li rel="2"><a href="#">List Item #2</a></li>
            <li rel="3"><a href="#">List Item #3</a></li>
            <li rel="4"><a href="#">List Item #4</a></li>
            <li rel="5"><a href="#">List Item #5</a></li>
            <li rel="6"><a href="#">List Item #6</a></li>
            <li rel="7"><a href="#">List Item #7</a></li>
            <li rel="8"><a href="#">List Item #8</a></li>
            <li rel="9"><a href="#">List Item #9</a></li>
            <li rel="10"><a href="#">List Item #10</a></li>
        </ul>
        <br />
        <a href="#" data-role="button" id="resetLO">Reset List Order</a>
        <a href="#" data-role="button" id="clearLS">Clear Local Storage</a>
    </div>
</div>
</body>
</html>
​

//fetches the list and calls show list to show the contents
function getList(){
    //alert("in getList");
    jQuery.ajax({
        url:"todolist.php",
        success: function(responseText){showList(responseText)},
        error: ajaxFailure
    });
}
//keeps track of the new order when the user drags to reorder
function updateOrder(){
    var listitems=document.getElementsByTagName("li");
    var liststring="";
    for(var i=0; i<listitems.length; i++){
        liststring=liststring+"\n"+listitems[i].firstChild.nodeValue;
    }
    jQuery.ajax({
        url:"todolist.php",
        success: getList,
        error: ajaxFailure,
        type: "post",
        data: {action: "set", items: liststring}
    });
}

    } else {
    $items=$_REQUEST["items"];
        if($action=="set"){
            file_put_contents("todolist.txt", $items);
        } else { //add an item
            print($items);
            file_put_contents("todolist.txt", "\n".$items, FILE_APPEND);
        }
    }
} else {
    //print the current file
    if(file_exists("todolist.txt")){
        $contents=file_get_contents("todolist.txt");
        if($contents!=""){
            $contents=trim($contents);
            print($contents);
        }
    } 
}