0

我正在使用 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>

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

4

1 回答 1

2

我有一个可以使用的本地存储 jQuery 插件：http: //plugins.jquery.com/tag/localstorage/。但是本地存储非常简单，你甚至不需要那个插件。以下是我为您编写的一些函数：

请注意，这基本上是一个小型 javascript 库：( LS = LocalStorage)

(function(){
    var LS = function(){
        return new LS.fn.init();
    };
    LS.fn = LS.protorype ={
        //Check to see if the browser suports LocalStorage
        init : function(){
            this.ls = (typeof(Storage)!=="undefined") ? false : true;
            return this;
        }
    }
    LS.fn.init.prototype = LS.fn;
    LS.fn.init.prototype = {
        set : function(name, val){
            if(this.ls) localStorage.setItem(name, val);
        },
        get : function (name){
            if(this.ls) return localStorage.getItem(name);
        },
        remove : function(name){
            if(this.ls) localStorage.removeItem(name);
        }
    }
    window.LS = window._ = LS;
})()

这个库的小文档。

Set：设置本地存储数据的值。前任：

LS().set("Foo", "bar");
--OR--
_().set("Foo", "bar");

Get：获取本地存储数据的值。前任：

LS().get("Foo")//returns "bar"
--OR--
_().get("Foo")

移除：移除本地存储数据。前任：

LS().remove("Foo");
--or--
_().remove("Foo");

希望这可以帮助！

祝你好运！

于 2013-11-10T00:34:34.693 回答