Question

我有3个这样的代码： -

<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

如果你想要，你将不得不使用cookies！嗯... 无论如何关于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 "";
}

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

修改：要在小提琴中尝试，请将cookie值更改为某个字符串（将location.pathname替换为"yes"），以便它可以按预期工作。

刷新页面后更改div位置

2 个答案: