Question

以下是我的代码示例：

<!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中的a标签，然后点击＃box2。

第一个值被选中（＃box1.html），但是当我点击第二个值时，它会选择前一个div点击的html，然后添加新的（＃box1.html，＃box2.html）。所以最后，当我刷新页面时，我得到3个div，这是我不想看到的。我只需要显示这两个div。

如何防止这种情况发生？

我对js很新，我很感激在这件事上有任何帮助。

Answer 1

您面临的问题是因为您要将内容附加到#fav然后将其放入本地存储中，在每次点击的下面代码中我都会将#fav设为空，所以现在每次添加任何旧内容都会被删除。< / p>

   $('#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);
        };
      });
    });

如何使用不同的键/值将每个克隆的div保存到localstorage中

1 个答案: