javascript的cookie如何使用使div结构保持

<html>
<body>
<div id="tip1" style="width:100px;height:100px;border:1px solid red;float:left;">

</div>
<div id="tip2" style="width:100px;height:100px;border:1px solid green;float:left;">

</div>
<input type="button" value="click" onclick="document.body.appendChild(document.getElementById('tip1'))">
</body>
</html>请看例子，刚开始红色div在左面，绿色div右面，点击后，位置互换。这时没问题，我要做的是，第二次打开浏览器运行这个程序，要保持绿色div在左面，而红色div要在右面，请问怎么做，，应该是cookie了吧，，请教代码实现

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

先定义两个样式div_green,div_red    <style type="text/css">
        .div_green
        {
            width: 100px;
            height: 100px;
            border: 1px solid green;
            float: left;
        }
        .div_red
        {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            float: left;
        }
    </style>    <div id="tip1" class="div_red">
    </div>
    <div id="tip2" class="div_green">
    </div>
    <input type="button" value="click" onclick="setCookie()" />

    <script type="text/javascript">
        var state = 1;
        window.onload = function() {
            readCookie();
        }        function setCookie() {
            var expDate = new Date();
            var dayPuls = expDate.getTime() + (7 * 24 * 60 * 60 * 1000);
            expDate.setTime(dayPuls);
            document.cookie = 'state=' + state + ';expires=' + expDate.toGMTString();
            alert("set cookie ok.");
        }
        function readCookie() {
            if (document.cookie) {
                var tmp = document.cookie.split(';')[0];
                var curState = tmp.split('=')[1];
                if (curState == '1') {
                    document.getElementById('tip1').className = 'div_green';
                    document.getElementById('tip2').className = 'div_red';
                }
            }
        }
    </script>
失败，if (document.cookie)   一直是空
在本地配置个服务程序IIS之类的，或者放到服务器上