这是我的代码的示例：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<div class="box not-selected" id="box1">
<a href="#" id="clone_once1" class="favorite"></a>
</div>
<div class="box not-selected" id="box2">
<a href="#" id="clone_once2" class="favorite"></a>
</div>
<div class="box" id="fav"></div>
<script>
$('#clone_once1').on('click', function(){
// Clone div
var add = $(this).parent();
add.each(function(){
var boxContent = ($(this).clone(true).addClass('selected').removeClass('not-selected'));
var get = $('#fav').append($(boxContent)).html();
localStorage.setItem('clicked1', get);
// Append item if localstorage is detected = Box1 Clone
if (localStorage["clicked1"]) {
$("#fav").append(localStorage["clicked1"]);
};
});
});
$('#clone_once2').on('click', function(){
var add_2 = $(this).parent();
add_2.each(function(){
var boxContent_2 = ($(this).clone(true).addClass('selected').removeClass('not-selected'));
var get_2 = $('#fav').append($(boxContent_2)).html();
localStorage.setItem('clicked2', get_2);
// Append item if localstorage is detected = Box2 Clone
if (localStorage["clicked2"]) {
$("#fav").append(localStorage["clicked2"]);
};
});
});
</script>
</body>
</html>
假设我单击＃box1中的一个标签，然后在＃box2中。
第一个值是正确选择的（＃box1.html），但是当我单击第二个值时，它会选择上一个div的html，然后添加新的div（＃box1.html，＃box2.html）。因此，最后，当我刷新页面时，我会得到3个Divs，这是我不想看到的。我只需要这两个div。
如何防止这种情况发生？
我是JS的新手，我感谢您对此的任何帮助。
您正在面临问题，因为您将内容附加到#FAV，然后将这些内容附加到本地存储中，然后将其放入下面的代码中，我每次#fav空了，因此现在每次添加时，任何旧内容都会被删除。
$('#clone_once1').on('click', function(){
// Clone div
// var objTemp = $('#fav').html("");//change
var add = $(this).parent();
add.each(function(){
var boxContent = ($(this).clone(true).addClass('selected').removeClass('not-selected'));
//var get = $('#fav').append($(boxContent)).html();
var get = $(boxContent).html().trim();
//if(localStorage.getItem('clicked1').length)
var temp = localStorage.getItem('clicked1');
if(temp==null)
{
var tempArray = [];
tempArray[0] = get;
localStorage.setItem('clicked1', JSON.stringify(tempArray));
}else{
var tempArray = JSON.parse(temp);
tempArray.push(get);
localStorage.setItem('clicked1', JSON.stringify(tempArray));
}
// Append item if localstorage is detected = Box1 Clone
if (localStorage["clicked1"]) {
var tempHtml = "";
$.each(JSON.parse(localStorage["clicked1"]),function(i){
tempHtml += '<div class="box not-selected" id="box2">'+JSON.parse(localStorage["clicked1"])[i]+'</div>';
}
);
//$("#fav").html("");
$("#fav").append(tempHtml);
};
});
});
$("#clone_once2").on('click', function(){
//$('#fav').html("");//change
var add_2 = $(this).parent();
add_2.each(function(){
var boxContent_2 = ($(this).clone(true).addClass('selected').removeClass('not-selected'));
//var get_2 = $('#fav').append($(boxContent_2)).html();
var get_2 = $(boxContent_2).html().trim();
//localStorage.setItem('clicked2', get_2);
var temp = localStorage.getItem('clicked2');
if(temp==null)
{
var tempArray = [];
tempArray[0] = get_2;
localStorage.setItem('clicked2', JSON.stringify(tempArray));
}else{
var tempArray = JSON.parse(temp);
tempArray.push(get_2);
localStorage.setItem('clicked2', JSON.stringify(tempArray));
}
// Append item if localstorage is detected = Box2 Clone
if (localStorage["clicked2"]) {
var tempHtml = "";
$.each(JSON.parse(localStorage["clicked2"]),function(i){
tempHtml += '<div class="box not-selected" id="box2">'+JSON.parse(localStorage["clicked2"])[i]+'</div>';
}
);
//$("#fav").html("");
$("#fav").append(tempHtml);
};
});
});