Javascript 如何从本地存储中存储和检索html div元素的位置？

我有一个div，它是一个长方体，我使用我在SO中找到的方法使它可以拖动，我希望它的位置在同一个源窗口和页面重新加载上保持不变。 我的逻辑是使用两个按钮，第一个按钮将框的位置设置为固定位置，并将其左上方的值存储到本地存储。 第二个从L.s.中删除第一个条目，并在框被拖到其他地方后设置一个新条目。 然后我使用一个在页面开始时加载的函数，检索在任何给定时间保存在L.S.中的任何值，并将框位置设置为最后保存的位置。 它用于保存和检索固定位置，但不用于移动位置。 这是一个有效的逻辑和正确的方法吗？我该怎么做？ 请考虑到我是个笨蛋

固定位置
固定位置
拖这个
固定位置
#可拖动分区{
光标：移动；
字体大小：30px；
文本对齐：居中；
线高：200px；
高度：200px；
宽度：200px；
背景：线性渐变（至底部、白色、浅蓝色）；
边框颜色：黑色；
边框样式：虚线；
边框宽度：3倍；
边界半径：15%；
位置：绝对位置；
}
#固定位置{
字号：24；
文本对齐：居中；
线高：200px；
z指数：-1；
位置：绝对位置；
左：74px；
顶部：74px；
边框样式：实心；
边框宽度：1px；
边界半径：8px；
身高：215px；
宽度：215px；
}
//使DIV元素成为draggagle：
dragElement（document.getElementById（“draggable div”）；
var draggable=document.getElementById（“draggable div”）；
功能牵引装置（elmnt）{
变量pos1=0，pos2=0，pos3=0，pos4=0；
if（document.getElementById（elmnt.id+“header”））{
/*如果存在，则标题是从中移动DIV的位置：*/
document.getElementById（elmnt.id+“header”）.onmousedown=dragMouseDown；
}否则{
/*否则，请从DIV内的任何位置移动DIV：*/
elmnt.onmousedown=dragMouseDown；
}
功能下拉列表（e）{
e=e | | window.event；
e、 预防默认值（）；
//在启动时获取鼠标光标位置：
pos3=e.clientX；
pos4=e.clientY；
document.onmouseup=关闭DrageElement；
//每当光标移动时调用函数：
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
//计算新光标位置：
pos1=pos3-e.clientX；
pos2=pos4-e.clientY；
pos3=e.clientX；
pos4=e.clientY；
//设置元素的新位置：
elmnt.style.top=（elmnt.offsetTop-pos2）+“px”；
elmnt.style.left=（elmnt.offsetLeft-pos1）+“px”；
}
函数closeDrageElement（）{
/*释放鼠标按钮时停止移动：*/
document.onmouseup=null；
document.onmousemove=null；
}
}
//将可拖动DIV设置为固定位置，并将其位置存储到本地存储器
函数fixedposition（）{
draggable.style.left=“80px”；
draggable.style.top=“80px”；
setItem（“draggable left”，draggable.style.left）；
setItem（“draggable top”，draggable.style.top）；
}  
//从本地存储中删除以前的固定位置条目，并在将其拖动到其他位置后存储新条目
函数setPinnedPositionItemToLocalStorage（）{
localStorage.removietem（“可拖动左”）；
localStorage.removietem（“可拖动顶部”）；
setItem（“draggable left”，draggable.style.left）；
setItem（“draggable top”，draggable.style.top）；
}
//从本地存储检索DIV的位置
（函数RetrieveValueFromLocalStorage（）{
draggable.style.top=localStorage.getItem（“draggable-top”）；
draggable.style.left=localStorage.getItem（“draggable left”）；
//在页面加载时调用immediate函数，并从localstorage设置输入值
})();

如果您保持控制台打开，您将看到错误

您的函数名为

setPinnedPositionItemToLocalStorage（）

（camelCase），但您正在通过说

onclick=“setPinnedPositionItemToLocalStorage（）”

（PascalCase）来设置它的单击处理程序。它们必须一致，因为Javascript区分大小写