javascript - Jquery と localStorage サイトのクリップドア/カートに要素を追加する方法

Question

私は localStorage で jquery を勉強していて、製品や画像などを追加して後で表示できるページ クリップボード タブを作成したいと考えています。

これは私のjqueryコードです:

var count = 0;
jQuery('.add_rem').click(function(e) {

    e.preventDefault();
    if(jQuery(this).hasClass('remove')) {
      count -= 1;
    }else {
      count += 1;
    }     
    jQuery.each( function(){
      if(jQuery(this).hasClass('remove')){
          if(count == 0) {
            jQuery('.list li.empty').show();
          }
          if($(".remove").attr('id') == localStorage.getItem('id') ) {
              localStorage.removeItem('id');
              $("#"+localStorage.getItem('id')).removeClass('remove');
          }
      } else {
          jQuery('.list li.empty').hide();
          localStorage.setItem('count', count);
          localStorage.setItem('id', jQuery(this).attr('id'));
          if(jQuery(this).attr('id') == localStorage.getItem('id')){
            jQuery(".add_rem#"+localStorage.getItem('id')).addClass("remove"); 
          }
          localStorage.setItem('link', jQuery('.link').attr('href'));
          localStorage.setItem('photo', jQuery('.photo').attr('src'));
          localStorage.setItem('name', jQuery('b.name').text());
        jQuery('#hp-content .wrapper .list').append('<li><a href="'+ localStorage.getItem('link') +'"> <img src="'+ localStorage.getItem('photo') +'" alt="photo" /><br />'+ localStorage.getItem('name') +' </a></li>');
        jQuery('.panel2 a span').text('('+ localStorage.getItem('count') +')');
      }
    jQuery('.panel2 a span').text('('+ localStorage.getItem('count') +')');
 })
})

これは、ある製品の HTML コードです。

<tr>
  <td class="nul">
   <a href="javascript:;" class="add_rem"><img src="/img/check_of.png" alt="Add / remove from clipboard" title="add to clipboard"></a>
  </td>
  <td class="nul">
   <a href="13/test/" class="link">
     <img class="photo" alt="Test" src="images/pl/brak.gif">
   </a>
  </td>
  <td class="nul"><b>Test1 / kk</b></td>
  <td class="nul"><i>Princeton</i></td>
  <td class="nul">College</td>
  <td class="nul">
    <a href="13/test/">
     <img alt="Show" src="images/general/show.gif">
    </a>&nbsp;&nbsp;
   </td>
 </tr>

これはクリップボードの HTML です:

<div style="" id="clipboard">
  <div class="panels">
    <ul>
      <li class="panel2"><a href="#">Clipboard <span>(0)</span></a></li>
    </ul>
  </div>
  <div id="hp-content"><div id="clipboard-bg">
        <div class="wrapper">
      <ul class="list"> 
       <li class="empty"><strong>Empty.</strong><span class="one">The clipboard is now empty.</span></li>
      </ul>
    </div>
  </div>

ただし、ページのリロード後、コピーされたすべての要素が消去されます