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 -->

來源

2011-08-03 user823527

JQuery的數據不會保留，因爲HTML載入它僅僅只要有效。本地存儲將是最好的解決方案，但舊版瀏覽器不支持它，而且其中還有很多。餅乾是一個很好的解決方案，最終使用較少值的cookie或更多值較小的cookie，具體取決於您認爲會達到的限制。

顯然，它保存服務器端將是巨大的:)

來源

2011-08-03 01:18:21

有很多可供模仿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 -->

來源

2011-08-04 01:34:02 user823527

Cookies，localStorage與jQuery數據存儲大小和位置信息

回答

相關問題