設置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，這將保存不同日期的不同位置。

我也註釋掉，我認爲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行。我用localStorage方法setItem()和getItem()替換了設置並獲取Cookie數據。

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