javascript - 设置 Javascript cookie 并检索它们

Question

我想要一个可以在屏幕上拖动并保存位置的 DIV，以便下次我返回时，DIV 位于同一个位置。

我已经通过使用 javascript/CSS 并将位置值存储到 javascript cookie 来实现功能，然后在重新加载页面时检索它(下面的代码)

我的问题是我有一个页面，内容根据 URL 中的变量加载到屏幕的不同部分

即www.example.com/example.php?date=10062016 可能有内容填充屏幕的左侧和 www.example.com/example.php?date=11062016 可能在屏幕右侧有内容。 因此，如果我将 DIV 拖到屏幕的右侧，内容会覆盖在一页上，但不会覆盖另一页。

我相信我需要做的是将 cookie 名称保存为 php 变量(日期)的值，并使用作为变量的名称加载 cookie。我相信这将允许我存储多个 cookie，这些 cookie 将保存不同日期的不同位置。

我还注释掉了我认为可能在底部起作用的javascript

function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 
function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    var pos = {left: dm.style.left, top: dm.style.top};
    document.cookie = JSON.stringify(pos);
    event.preventDefault();
    return false;
}
var dm = document.getElementById('dragme'); 
try {
  var pos = JSON.parse(document.cookie);
  dm.style.left = pos.left ? pos.left : '0px';
  dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
  // Some error handling
}
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false); 


/*

function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    var pos = {left: dm.style.left, top: dm.style.top};
    var str = JSON.stringify(pos);
    var dat = <?php echo $_GET[date];?>;
    document.cookie = dat+"="+str;
    event.preventDefault();
    return false;
}
var dm = document.getElementById('dragme'); 
try {
  var pos = JSON.parse(dat);
  dm.style.left = pos.left ? pos.left : '0px';
  dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
  // Some error handling
}
*/

aside { 
    position:  absolute;
    left: 0;
    top: 0; /* set these so Chrome doesn't return 'auto' from getComputedStyle */
    width: 200px; 
    background: rgba(255,255,255,0.66); 
    border: 2px  solid rgba(0,0,0,0.5); 
    border-radius: 4px; padding: 8px;
}

<aside draggable="true" id="dragme">
    This is an aside, drag me.
</aside>
<p>I never am really satisfied that I understand anything; because, understand it well as I may, my comprehension can only be an infinitesimal fraction of all I want to understand about the many connections and relations which occur to me, how the matter in question was first thought of or arrived at, etc., etc.</p>
<p>In almost every computation a great variety of arrangements for the succession of the processes is possible, and various considerations must influence the selections amongst them for the purposes of a calculating engine. One essential object is to choose that arrangement which shall tend to reduce to a minimum the time necessary for completing the calculation.</p>
<p>Many persons who are not conversant with mathematical studies imagine that because the business of [Babbage’s Analytical Engine] is to give its results in numerical notation, the nature of its processes must consequently be arithmetical and numerical, rather than algebraical and analytical. This is an error. The engine can arrange and combine its numerical quantities exactly as if they were letters or any other general symbols; and in fact it might bring out its results in algebraical notation, were provisions made accordingly.</p>
<p>The Analytical Engine has no pretensions whatever to originate anything. It can do whatever we know how to order it to perform. It can follow analysis, but it has no power of anticipating any analytical revelations or truths. Its province is to assist us in making available what we are already acquainted with.</p>

Answer 1

我只更改了您的 JavaScript 代码中的 2 行。我已将设置和获取 cookie 数据替换为 localStorage 方法 setItem() 和 getItem()。

关于localStorage保存数据多久，你可以看看@Pointy's answer here . 简而言之，不清楚这些数据何时会被清除(通常它会在浏览器中保留足够长的时间)，但您可以随时使用 localStorage.setItem() 和 localStorage.clearItem() 方法。

function drag_start(event) {
    var style = window.getComputedStyle(event.target, null);
    event.dataTransfer.setData("text/plain",
    (parseInt(style.getPropertyValue("left"),10) - event.clientX) + ',' + (parseInt(style.getPropertyValue("top"),10) - event.clientY));
} 
function drag_over(event) { 
    event.preventDefault(); 
    return false; 
} 
function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    var pos = {left: dm.style.left, top: dm.style.top};
    console.log( pos );
    localStorage.setItem("div_position", JSON.stringify(pos));
    event.preventDefault();
    return false;
}
var dm = document.getElementById('dragme'); 
try {
  var pos = JSON.parse(localStorage.getItem("div_position"));
  dm.style.left = pos.left ? pos.left : '0px';
  dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
  // Some error handling
}
dm.addEventListener('dragstart',drag_start,false); 
document.body.addEventListener('dragover',drag_over,false); 
document.body.addEventListener('drop',drop,false); 


/*

function drop(event) { 
    var offset = event.dataTransfer.getData("text/plain").split(',');
    var dm = document.getElementById('dragme');
    dm.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
    dm.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
    var pos = {left: dm.style.left, top: dm.style.top};
    var str = JSON.stringify(pos);
    var dat = <?php echo $_GET[date];?>;
    document.cookie = dat+"="+str;
    event.preventDefault();
    return false;
}
var dm = document.getElementById('dragme'); 
try {
  var pos = JSON.parse(dat);
  dm.style.left = pos.left ? pos.left : '0px';
  dm.style.top = pos.top ? pos.top : '0px';
} catch (e) {
  // Some error handling
}
*/