javascript - 如何在本地保存重新排序列表的新顺序？ (Javascript/Jquery——不可排序插件)

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>

这个想法是仅在用户第一次访问该页面时随机排序此列表。然后，只要他们在设定的时间内返回此页面，他们就会看到列表的排序与他们第一次访问该页面时的排序完全一样(与第一次随机排序的顺序相同)。这是我一直在编写的脚本:

//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