如何在本地保存重新排序列表的新订单？ （Javascript / Jquery - 不可排序的插件）

Question

我有一个正在进行的小提琴保存在这里（你可以看到我编辑了很多次试图解决这个问题）：http://jsfiddle.net/JsJs2/182/

我有一套基本的html，我一直在努力测试这个：

<div id="inventoryBlock">
    <div class="list_bg">Hello</div>
    <div class="list_bg">World</div>
    <div class="list_bg">Whats</div>
    <div class="list_bg">Going</div>
    <div class="list_bg">Down?</div>
</div>
<a href="#" id="undo">Undo</a>

<div id="echo"></div>

这个想法是在用户首次访问该页面时随机对该列表进行排序。然后，只要他们在设定的时间内返回此页面，他们就会看到列表的排序与他们第一次访问页面时的排序完全相同（与第一次随机排序的顺序相同）。这是我一直在努力的剧本：

//var orig = $("#inventoryBlock").children(".list_bg");
$(document).ready(function () {
    var now = (new Date()).getTime();
    var lastTime = 0;
    var lastTimeStr = localStorage["lastTime"];
    if (lastTimeStr) lastTime = parseInt(lastTimeStr, 10);
    if (now - lastTime > 1 * 60 * 1000) {
        reorder();
    } else {
        $("#inventoryBlock").html(elements);
    }
    localStorage["lastTime"] = "" + now;
});
//function 'reorder' is declared
function reorder() {
    //variable 'grp' is defined as the .list_bg elements
    //variable 'grp' is an empty jquery object, not an array--an array has '[]' in the variable
    var grp = $("#inventoryBlock").children();

    //variable 'cnt' is defined as the number of .list_bg elements
    var cnt = grp.length;

    //variables 'temp' and 'x' are declared
    var temp, x;
    //variable 'i' is declared and defined as 0, a loop is initiated to continue until the value of 'i' is no longer less than the value of 'cnt'

    // While there remain elements to shuffle...
    for (var i = 0; i < cnt; i++) {
        //the 'temp' variable is defined as the current .list_bg item, assigned an order, and set as an array value using the associated 'i' value

        // Pick a remaining element...
        //temporaryValue = array[currentIndex]
        temp = grp[i];
        //the 'x' value is assigned randomly based on the 'cnt' value (use javascript random function)
        x = Math.floor(Math.random() * cnt);

        // And swap it with the current element.
        //array[currentIndex] = array[randomIndex];
        grp[i] = grp[x];
        //array[randomIndex] = temporaryValue;
        grp[x] = temp;
    }
    //returns empty jquery object
    //removes original object
    $(grp).remove();
    //appends new object/replacement object
    $("#inventoryBlock").append($(grp));
    console.log($(grp).get());
    var elements = $('#inventoryBlock').find('.list_bg');
}

function orderPosts() {
    $("#inventoryBlock").html(orig);
}

$("#undo").click(function (e) {
    e.preventDefault();
    orderPosts();
});

底部函数orderPosts（）在这里并不真正相关，而且我试图用echo echo来回显值，所以我可以更好地弄清楚要做什么。 inventoryBlock是唯一重要的div。整个想法是在第一页访问之后将列表顺序保存到数据，并在它们在该设置的时间段内重新访问页面时加载该数据。我坚持如何实现这一目标。我已经尝试过太多建议甚至重述，尝试过评论并重新推荐代码，以便我可以逐步解决。我只是遗漏了一些东西。有人能指出我正确的方向吗？

Answer 1

看起来您只是将时间戳放在localStorage中。我认为你也需要把洗牌顺序放在localStorage中。

// Remember this for the "undo" button.
var origHtml = $("#inventoryBlock").html();

$(document).ready(function () {
    var now = (new Date()).getTime();
    var doReorder = true;

    var lastTimeStr = localStorage["lastTime"];
    if (lastTimeStr) {
        var lastTime = parseInt(lastTimeStr, 10);
        if (now - lastTime <= 1 * 60 * 1000) {
            // It hasn't been a minute, so use the stored order.
            $("#inventoryBlock").html(localStorage["html"]);
            doReorder = false;
        }
    }

    if (doReorder) {
        reorder();
        localStorage["lastTime"] = "" + now;
        localStorage["html"] = $("#inventoryBlock").html();
    }   
});

$("#undo").click(function (e) {
    e.preventDefault();
    localStorage["lastTime"] = "";
    localStorage["html"] = "";
    $("#inventoryBlock").html(origHtml);
});

jsfiddle