用于存储大小和位置信息的 Cookie、localStorage 与 jquery 数据
存储可调整大小的可拖动 div 的大小和位置信息的最佳选择是什么？我有一个页面，其中有许多可调整大小的可移动 div。当用户再次访问该页面时，必须恢复 div 的状态（顶部、左侧、宽度、高度）。我用 cookie 做了一项测试，效果不错，但如果有很多 div，这可能不正确。我测试了jquery数据，但似乎有问题。对于下一页加载时检索的数据，此代码返回未定义。
<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 -->
What's the best option for storing size and position information for resizable draggable divs? I have a page that will have many resizable movable divs. The state of the divs (top, left, width, height) will have to be restored when the user visits the page again. I did one test with cookies that worked, but this might not be right if there are many divs. I tested jquery data, but there seems to be a problem. This code returns undefined for data retrieved at the next page load.
<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
<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 -->
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
JQuery 数据不会持久存在，仅在加载 HTML 时才有效。本地存储将是最好的解决方案，但旧版浏览器不支持它，而且仍然有很多浏览器存在。 Cookie 是一个很好的解决方案，最终使用较少的具有较长值的 Cookie，或使用较多具有较小值的 Cookie，具体取决于您认为会达到的限制。
显然，将其保存在服务器端会很棒:)
JQuery data does not persist, it is only valid as long as the HTML is loaded. 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.
Obviously, saving it server side would be great :)
决定使用包含转换为字符串的数组的 cookie。对于每个 div，我创建一个 cookie，它使用 join 函数从变量数组中生成一个字符串。
为了读取 cookie 信息，我将字符串拆分回数组中。
HTML 信息
Decided to go with cookies containing arrays converted into strings. For each div, I create a cookie that uses the join function to make a string out of the array of variables.
To read the cookie info I split the string back into an array.
HTML information