我尝试将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();     
}

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移动到列表顶部,以便每个项目的链接更改http://www.example3.com – > #

所以我想清楚旧列表并重新制作整个列表.所以我想我必须改变这一行,但我不知道如何. list.append(‘< li rel =“’item’”>< a href =“#”> List Item#’item’< / a>< / li>‘);

最佳答案 对于HTML5,我会看看localStorage

> http://www.w3schools.com/html5/html5_webstorage.asp
> http://sixrevisions.com/html/introduction-web-storage/

更新：

以下是使用本地存储的示例

> http://jsfiddle.net/TWMEq/
> http://jsfiddle.net/TWMEq/1/(重新加载清单订单)

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

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="#">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>
​