Cookie，localStorage与jquery数据，用于存储大小和位置信息
[英]Cookies, localStorage vs. jquery data for storing size and position info
问题描述
What's the best option for storing size and position information for resizable draggable divs? 
存储可调整大小的可拖动div的大小和位置信息的最佳选择是什么？ I have a page that will have many resizable movable divs. 我有一个页面，将有许多可调整大小的可移动div。 The state of the divs (top, left, width, height) will have to be restored when the user visits the page again. 当用户再次访问该页面时，必须恢复div的状态（顶部，左侧，宽度，高度）。 I did one test with cookies that worked, but this might not be right if there are many divs. 我做了一个有效的cookie测试，但如果有很多div，这可能不对。 I tested jquery data, but there seems to be a problem. 我测试了jquery数据，但似乎有问题。 This code returns undefined for data retrieved at the next page load. 对于在下一页加载时检索的数据，此代码返回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 information 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 -->
2 个解决方案
解决方案1
4 已采纳 2011-08-03 01:18:21
JQuery data does not persist, it is only valid as long as the HTML is loaded. JQuery数据不会持久存在，只有加载HTML才有效。 Local storage would be the best solution, but it's not supported by older browsers, and there are still many of them out there. 本地存储将是最好的解决方案，但旧版浏览器不支持它，并且仍然存在许多浏览器。 Cookies are a good solution, eventually use less cookies with longer values, or many cookies with smaller values, depending on which limit you think you will hit. Cookie是一个很好的解决方案，最终会使用较少值的Cookie，或者使用较小值的Cookie，具体取决于您认为会达到的限制。
Obviously, saving it server side would be great :) 显然，保存服务器端会很棒:)
解决方案2
0
Decided to go with cookies containing arrays converted into strings. 决定使用包含转换为字符串的数组的cookie。 For each div, I create a cookie that uses the join function to make a string out of the array of variables. 对于每个div，我创建一个cookie，它使用join函数从变量数组中生成一个字符串。 To read the cookie info I split the string back into an array. 要读取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 information 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 -->
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.