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>

但在页面重新加载后，所有复制的元素都将被删除

JSFIDDLE EXAMPLE

Answer 1

我没有看到LocalStorage对象的初始化。我通常使用modernizr来做这件事，可能是这样的：

if (Modernizr.localstorage) {
    // localStorage starts
    var localStore = window.localStorage;
    localStore.setItem["item_1"] = what_you_want_save_1;
    localStore["item_1"] = what_you_want_save_1;
    localStore.item_1 = what_you_want_save_1;
    // localStorage ends
}

如果你想从localStorage获取数据：

if (Modernizr.localstorage) {
    var localStore = window.localStorage;
    if (localStore.item != undefined) {
        item_1 = localStore.item_1;
    }
}

我希望这就是你要找的东西：）

Jquery localStorage剪贴板

JSFIDDLE EXAMPLE

1 个答案: