Cookies，localStorage与jQuery数据存储大小和位置信息

问题描述：

存储大小和位置信息的大小和位置信息的最佳选择是什么？我有一个页面，将有很多可调整大小的移动div。当用户再次访问该页面时，div的状态（顶部，左侧，宽度，高度）将不得不恢复。我做了一个有效的cookie测试，但如果有很多div，这可能是不对的。我测试了jquery数据，但似乎有问题。此代码返回未定义的数据在下一页加载时检索到的数据。Cookies，localStorage与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，具体取决于您认为会达到的限制。

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

有很多可供模仿localStorage的旧版本浏览器polyfills的。 –

答

决定去与含转换成字符串数组饼干。对于每个div，我创建一个使用连接函数从变量数组中创建一个字符串的cookie。要读取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 -->

Cookies，localStorage与jQuery数据存储大小和位置信息

相关推荐