Question

存储可调整大小的可拖动div的大小和位置信息的最佳选择是什么？我有一个页面，将有许多可调整大小的可移动div。当用户再次访问该页面时，必须恢复div的状态（顶部，左侧，宽度，高度）。我做了一个有效的cookie测试，但如果有很多div，这可能不对。我测试了jquery数据，但似乎有问题。对于在下一页加载时检索的数据，此代码返回undefined。

<script>
    function getdivinfo() {
        var position = $( "#compage" ).position(); 
        var width = $( "#compage" ).width(); 
        var height= $( "#compage" ).height(); 
        var left = position.left;
        var top = position.top;

        $( "#compage" ).data("layout", { "dleft": left, "dtop": top, "dwidth": width, "dheight": height });
    }

   function divlayout() {

        var restleft = $( "#compage" ).data("layout").dleft;
        var resttop = $( "#compage" ).data("layout").dtop;
        var restwidth = $( "#compage" ).data("layout").dwidth;
        var restheight = $( "#compage" ).data("layout").dheight;

        $( "#compage" ).css("top", resttop);
        $( "#compage" ).css("left", restleft);
        $( "#compage" ).css("width", restwidth);
        $( "#compage" ).css("height", restheight);

    }

</script>

HTML信息

<body onload="divlayout();">

<div class="demo">

<div id="compage" class="ui-widget-content">
    <h3 class="ui-widget-header">Sample</h3>
</div>

<a href="#" onclick="getdivinfo();">Get div info</a>

<a href="#" onclick="savedivinfo();"> Save div info</a>

</div><!-- End demo -->

Answer 1

JQuery数据不会持久存在，只有在加载HTML时它才有效。本地存储将是最好的解决方案，但旧版浏览器不支持它，并且仍然存在许多浏览器。 Cookie是一个很好的解决方案，最终会使用较少值的Cookie，或者使用较小值的Cookie，具体取决于您认为会达到的限制。

显然，保存服务器端会很棒：）

Answer 2

决定使用包含转换为字符串的数组的cookie。对于每个div，我创建一个cookie，它使用join函数从变量数组中生成一个字符串。要读取cookie信息，我将字符串拆分为数组。

    <script>
        function getdivinfo() {
            var position = $( "#compage" ).position(); 
            var width = $( "#compage" ).width(); 
            var height= $( "#compage" ).height(); 
            var left = position.left;
            var top = position.top;

            var divarray = new Array();
            divarray[0] = left;
            divarray[1] = top;
            divarray[2] = width;
            divarray[3] = height;

            arraycookie = divarray.join('|');  

            setCookie("compage", arraycookie, 600);

        }

        function restorediv() {

            var arraycookie = getCookie("compage");
            if ( arraycookie == "" ) return;
            var divarray = arraycookie.split('|');

            var restleft = divarray[0]; 
            /* if (restleft == "") return; */
            var resttop = divarray[1]; 
            /* if (resttop == "") return; */
            var restwidth = divarray[2];
            /* if (restwidth == "") return; */
            var restheight = divarray[3];
            /* if (restheight == "") return; */

            $( "#compage" ).css("top", resttop);
            $( "#compage" ).css("left", restleft);
            $( "#compage" ).css("width", restwidth);
            $( "#compage" ).css("height", restheight);
        }

    </script>

HTML信息

<body onload="restorediv();">
<div class="demo">
<div id="compage" class="ui-widget-content">
    <h3 class="ui-widget-header">Sample</h3>
</div>
<a href="#" onclick="getdivinfo();">Get div info</a>
</div><!-- End demo -->

Cookie，localStorage与jquery数据，用于存储大小和位置信息

2 个答案: