我试验的页面就像一个简单的笔记页面,您可以单击按钮来创建可在页面上移动的 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,但我真的不明白当有这么多东西需要保存时,解决这个问题的最佳方法是什么。我还计划添加更多内容,基本上用户所做的一切都需要在重新加载页面后保留。