我试验的页面就像一个简单的笔记页面,您可以单击按钮来创建可在页面上移动的 div。所以当我重新加载页面时,我希望这些 div 保留在页面上。我该如何以最佳方式解决这个问题?我已经尝试了很多次 localStorage,但没有成功。
以下是我创建和移动它们的简化版本:
window.onload = function() {
var iscklick = 0;
function trigger(id){
let tempid = "#div_" + id;
$(document).on('mousemove', function(event){
if(isclick){
$(tempid).css({'top':event.pageY - $('#div_' + id).outerHeight() /2, 'left':event.pageX - $(tempid).outerHeight() /2});
}
//mouseup makes it unstick and cleans tempid
}).on('mouseup',function(){
isclick = 0;
tempid = ""
})
}
$(document).ready(function(){
$(".container").on('mouseover', '.element', function(){
var id = this.id;
var split_id = id.split("_");
var finalid = split_id[1];
//mousedown triggers func
$("#div_" + finalid).on('mousedown', function(){
isclick = 1;
trigger(finalid);
})
})
$(".add").click(function(){
var lastid = $(".element:last").attr("id");
var split_id = lastid.split("_");
var nextindex = Number(split_id[1]) + 1;
$(".element:last").after("<div class='element' id='div_"+ nextindex +"'></div>");
$("#div_" + nextindex).append("");
});
});
};
html, body{
background-color:lightgray;
margin:0;
height:100%;
width:100%;
}
.add {
position: relative;
float:left;
background-color: rgb(105, 230, 188);
color: white;
border: none;
height: 50px;
width: 50px;
font-size: 43px;
font-weight: bolder;
box-shadow: 0 2px 4px darkslategray;
cursor: pointer;
border-radius: 70%;
transition: all 0.2s ease;
top:45%;
margin: 2%;
}
.add:active{
background-color: rgb(45, 138, 107);
box-shadow: 0 0 2px darkslategray;
transform: translateY(2px);
}
.element{
position:absolute;
padding: 5px;
height: 100px;
width: 200px;
background-color: yellow;
box-shadow: 0 2px 4px rgb(172, 172, 106);
margin: 1%;
border-radius: 10px;
float:left;
}
.element:hover{
z-index: 1;
}
#div_1{
display: none;
}
<!doctype html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="main.js"></script>
<html >
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<button class='add'>+</button>
<div class="container" >
<div class='element' id='div_1'></div>
</div>
</body>
</html>
提前谢谢,我只是想学习如何在 jquery 中保存状态。
我尝试了很多 localStorage 并研究了 cookies,但我真的不明白当有这么多东西需要保存时,解决这个问题的最佳方法是什么。我还计划添加更多内容,基本上用户所做的一切都需要在重新加载页面后保留。
您必须使用
localStorage
,但问题是您必须将container
HTML 保存到其中。您需要在添加按钮单击以及调用
trigger()
函数时执行此操作(以保存带有位置的 HTML)以下是工作片段:
结果:https://jsfiddle.net/5ep9v3kr/
您可以考虑使用
localStorage
哪个对用户有用,而不会在用户会话被破坏时丢失其保存的状态。或者您可以使用sessionStorage
哪个来存储当前会话的数据。为了保持不可知,我将使用该术语,然后您可以根据自己的喜好
myStorage
将其替换为localStorage
或。sessionStorage
需要了解的事情:
myStorage.setItem(key, value)
设置要存储为键的值,例如myStorage.setItem('name', 'John Doe')
,您需要将一个字符串传递给该键,因此您可能需要执行JSON.stringify(thestuff)
myStorage.getItem(key)
返回存储在键中的字符串,默认为null
。如果你想使用字符串以外的其他内容,那么你将需要通过JSON.parse(thestuff)
或你的解析功能将其解析回来另一个答案建议将 HTML 存储在存储器中,但这会浪费内存,而且是一种相当不稳定的方法,因为如果您更改 HTML,那么所有已存储的 HTML 在重新加载时都将无效。
相反,我强烈建议:
function
getDataFromHTML(thehtml)
function
getHTMLFromData(thedata)
myStorage.setItem(JSON.stringify(thekey, getDataFromHTML(thehtml)))
myStorage.getItem(JSON.parse(thekey))
当然,获取 HTML、从 HTML 中查找数据并指定密钥是您的责任。