设置Javascript cookie并检索它们

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

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

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

i、 e.

www.example.com/example.php？date=10062016

可能在屏幕左侧有内容，而

www.example.com/example.php？date=11062016

可能在屏幕右侧有内容。 因此，如果我将DIV拖到屏幕的右侧，则内容会在一个页面上覆盖，而不会在另一个页面上覆盖

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

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

函数拖动启动（事件）{
var style=window.getComputedStyle（event.target，null）；
event.dataTransfer.setData（“text/plain”，
（parseInt（style.getPropertyValue（“左”），10-event.clientX）+’，“+（parseInt（style.getPropertyValue（“上”），10-event.clientY））；
} 
函数拖过（事件）{
event.preventDefault（）；
返回false；
} 
函数删除（事件）{
var offset=event.dataTransfer.getData（“text/plain”）.split（'，'）；
var dm=document.getElementById（'dragme'）；
dm.style.left=（event.clientX+parseInt（偏移量[0]，10]）+'px'；
dm.style.top=（event.clientY+parseInt（偏移量[1]，10]）+'px'；
var pos={left:dm.style.left，top:dm.style.top}；
document.cookie=JSON.stringify（pos）；
event.preventDefault（）；
返回false；
}
var dm=document.getElementById（'dragme'）；
试一试{
var pos=JSON.parse（document.cookie）；
dm.style.left=pos.left？pos.left:'0px'；
dm.style.top=pos.top？pos.top:'0px'；
}捕获（e）{
//一些错误处理
}
dm.addEventListener（'dragstart'，drag_start，false）；
document.body.addEventListener（'dragover'，drag_over，false）；
document.body.addEventListener（'drop'，drop，false）；
/*
函数删除（事件）{
var offset=event.dataTransfer.getData（“text/plain”）.split（'，'）；
var dm=document.getElementById（'dragme'）；
dm.style.left=（event.clientX+parseInt（偏移量[0]，10]）+'px'；
dm.style.top=（event.clientY+parseInt（偏移量[1]，10]）+'px'；
var pos={left:dm.style.left，top:dm.style.top}；
var str=JSON.stringify（pos）；
var-dat=；
document.cookie=dat+“=”+str；
event.preventDefault（）；
返回false；
}
var dm=document.getElementById（'dragme'）；
试一试{
var pos=JSON.parse（dat）；
dm.style.left=pos.left？pos.left:'0px'；
dm.style.top=pos.top？pos.top:'0px'；
}捕获（e）{
//一些错误处理
}
*/

aside{
位置：绝对位置；
左：0；
顶部：0；/*设置这些选项，以便Chrome不会从getComputedStyle返回“自动”*/
宽度：200px；
背景：rgba（255255,0.66）；
边框：2倍实心rgba（0,0,0,0.5）；
边界半径：4px；填充：8px；
}

这是一个旁白，拖住我。
我从来没有真正满足于我了解任何事情；因为，尽我所能地理解它，我的理解只能是我想要理解的关于发生在我身上的许多联系和关系的一小部分，关于这个问题是如何首先想到的或是如何达成的，等等

在几乎每一次计算中，都有可能对过程的连续性进行多种安排，为了计算引擎的目的，各种考虑因素必须影响其中的选择。一个基本目标是选择一种安排，该安排应尽量减少完成计算所需的时间

许多不熟悉数学研究的人认为，由于[巴贝奇的分析引擎]的任务是以数字符号给出结果，因此其过程的性质必须是算术和数字的，而不是代数和分析的。这是一个错误。引擎可以精确地排列和组合其数字量，就像它们是字母或任何其他通用符号一样；事实上，如果有相应的规定，它可能会在代数记数法中给出它的结果

分析引擎并不自命不凡地创造任何东西。它可以做任何我们知道如何命令它执行的事情。它可以跟随分析，但它没有预测任何分析启示或真相的能力。它的职责是帮助我们提供我们已经熟悉的内容。

我只更改了您的javascript代码中的两行。我用

localStorage

方法

setItem（）

和

getItem（）

替换了设置和获取cookie数据

关于

localStorage

将数据存储多长时间，您可以更好地进行签出。 简而言之，不清楚何时清除此数据（通常它在浏览器中停留的时间足够长），但您可以随时使用

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
}
*/

函数拖动启动（事件）{
var style=window.getComputedStyle（event.target，null）；
event.dataTransfer.setData（“text/plain”，
（parseInt（style.getPropertyValue（“左”），10-event.clientX）+’，“+（parseInt（style.getPropertyValue（“上”），10-event.clientY））；
} 
函数拖过（事件）{
event.preventDefault（）；
返回false；
} 
函数删除（事件）{
var抵销