gpt4 book ai didi

javascript - 用于存储大小和位置信息的 Cookies、localStorage 与 jquery 数据

转载 作者:可可西里 更新时间:2023-11-01 12:53:01 25 4
gpt4 key购买 nike

存储可调整大小的可拖动 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 -->

最佳答案

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

显然,将其保存在服务器端会很棒 :)

关于javascript - 用于存储大小和位置信息的 Cookies、localStorage 与 jquery 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6920634/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com