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

Question

我有一个正在进行的 fiddle 保存在这里（你可以看到我已经痛苦地编辑了很多次试图解决这个问题）：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>

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

//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 div 来回显值，这样我就可以更好地弄清楚该怎么做。 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