cookie、localStorage和jquery数据用于存储大小和位置信息

Cookies, localStorage vs. jquery data for storing size and position info

本文关键字：位置 信息 存储 数据 localStorage jquery cookie 用于      更新时间：2023-09-26

为可调整大小的可拖动div存储大小和位置信息的最佳选择是什么?我有一个页面，将有许多可调整大小的可移动div。div的状态(顶部，左侧，宽度，高度)必须在用户再次访问页面时恢复。我用饼干做了一个测试，效果不错，但如果有很多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 -->

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

显然，将它保存在服务器端将是伟大的:)

决定使用包含转换为字符串的数组的cookie。对于每个div，我创建一个cookie，该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 -->
相关文章：