我计划在我的网站上有一个拖放注释功能，并将其保存在javascript cookie中。此外，我想将文本区域保存为一个变量，并将变量保存为cookie。。。我不想使用本地存储。如果您在div元素所在的部分看到，则有一个按钮。我真的不知道如何将文本框中的变量放在cookie上，所以当你点击变量时，它会将文本作为变量存储在文本框中，然后将变量存储为cookie。因此，当您重新加载页面时，它会将cookie插入文本区域。我想做这样的事情：
<!DOCTYPE html>
<html>
<style>
#notes {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#notesheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
</style>
<body>
<div id="notes">
<div id="notesheader">Notes</div>
<textarea rows="4" cols="50"></textarea>
<br>
<button onclick="document.cookie = "username= Notes";">Save</button>
</div>
<script>
//Make the DIV element draggable:
dragElement(document.getElementById("notes"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<button onclick="hideshow()">Notes</button>
<script>
function hideshow() {
var x = document.getElementById("notes");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
有解决方案吗？
为了获得textarea值，您只需要查询它并获得它的值。那么您应该使用CCD_ 2来设置所需的cookie。
创建cookie
所以，每当点击保存按钮时，您都应该运行这样的功能：
HMTL
<div id="notes">
<div id="notesheader">Notes</div>
<textarea id="notes" rows="4" cols="50"></textarea>
<br>
<button onclick="saveNotes();">Save</button>
</div>
Javascript
function saveNotes() {
document.cookie = "textAreaValue=" + document.getElementById("notes").value
}
读取cookie
要从浏览器中读取cookie，您需要获取document.cookie值并从中注入您想要的值(因为它保留了所有域cookie(。按名称获取cookie有点棘手，因为document.cookie将返回域中的所有cookie，因此我们应该为此定义两个函数。首先是一个按所需名称获取cookie的函数，另一个函数捕获窗口加载，然后将cookie加载到我们的元素中。
你的代码应该是这样的：
function getCookie(cookieName) {
var name = cookieName + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
window.onload = function() { // window.onload will indicate when the window is loaded do this function
var textAreaFromCookie = getCookie("textAreaValue")
if (textAreaFromCookie) {
document.getElementById('notes').value = textAreaFromCookie
}
};
问题是在由"s组成的字符串中使用了"而没有转义。使用带有's的字符串或转义引号：
<!DOCTYPE html>
<html>
<style>
#notes {
position: absolute;
z-index: 9;
background-color: #f1f1f1;
text-align: center;
border: 1px solid #d3d3d3;
}
#notesheader {
padding: 10px;
cursor: move;
z-index: 10;
background-color: #2196F3;
color: #fff;
}
</style>
<body>
<div id="notes">
<div id="notesheader">Notes</div>
<textarea rows="4" cols="50"></textarea>
<br>
<button onclick="document.cookie = 'username= Notes';">Save</button>
</div>
<script>
//Make the DIV element draggable:
dragElement(document.getElementById("notes"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "header")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
<button onclick="hideshow()">Notes</button>
<script>
function hideshow() {
var x = document.getElementById("notes");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>