Jquery 和 localStorage 如何向站点添加更多元素 clipdoard/cart

Jquery and localStorage how to add more elements to the site clipdoard/cart

本文关键字：元素 clipdoard cart 添加 站点 localStorage Jquery      更新时间：2023-09-26

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

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

我有一个本地存储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;
})()

此库的小型文档。

设置

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

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

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

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

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

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

希望这有帮助！

祝你好运！

相关文章：