刷新页面后更改div位置

Question

我有3 div像这样的代码：-

<div class="row" id="wrapper">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>

当单击刷新按钮时

<button id="refresh">Refresh</button>

我们更改了div，但是当我刷新页面时需要更改div。

所以，我不需要单击刷新，每次打开页面时都需要更改div的位置

我的Javascript代码是：-

        var chain = [
            document.getElementById("div1"),
            document.getElementById("div2"),
            document.getElementById("div3")
        ],
        wrapper = document.getElementById("wrapper"),
        refresh = document.getElementById("refresh");

        refresh.onclick = function() {
            chain.push( chain.shift() );
            for ( var i=0, len = chain.length; i < len; i++ ) {
                var el = chain[i];
                wrapper.removeChild(el);
                wrapper.appendChild(el);
            };
            console.log(chain);
        };  

Answer 1

如果您需要，则必须使用Cookie！ 嗯...反正还是关于cookie的： http ： //www.w3schools.com/js/js_cookies.asp

码：

document.cookie="height: 99px";

现在你可以

document.getElementById("div1").height(document.cookie);

Answer 2

正如我所评论的，您可以使用cookie来控制页面是否被刷新。 您可以控制用户何时卸载页面，因此，类似于：

var chain = [
    document.getElementById("div1"),
    document.getElementById("div2"),
    document.getElementById("div3")
],
    wrapper = document.getElementById("wrapper"),
    refresh = document.getElementById("refresh");

refresh.onclick = function() {
    chain.push( chain.shift() );
    for ( var i=0, len = chain.length; i < len; i++ ) {
        var el = chain[i];
        wrapper.removeChild(el);
        wrapper.appendChild(el);
    };
    console.log(chain);
};  

/////////////////////

if( !!getCookie('refresh') == location.pathname ){
    setCookie('refresh', '', -1);
    refresh.click();
}

window.onbeforeunload = function(){
    setCookie('refresh', location.pathname, 1);
};

/////////////////////

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

您可以检查jsFiddle 。 请记住，jsFiddle更改了路径（它添加了“ / show /”），因此您必须在您的环境中进行尝试，jsfiddle可以有效地查看cookie的存储方式和代码的工作方式。

编辑 ：要在小提琴中尝试，请将cookie值更改为某个字符串（用"yes"替换location.pathname ），因此它应能按预期工作。