如何使用不同的 key/value 将每个克隆的 div 保存到本地存储中

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 divs，这是我不想看到的。我只需要显示这两个div。

如何防止这种情况发生？

我是 js 的新手，如果能在这方面提供帮助，我将不胜感激。

Answer 1

您遇到问题是因为您将内容附加到#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);
        };
      });
    });

如何使用不同的 key/value 将每个克隆的 div 保存到本地存储中

How to save each cloned div into localstorage with a different key/value

javascript

jquery

clone

store