Jquery и localStorage, как добавить больше элементов на сайт clipdoard / cart

0

Я изучаю jquery с localStorage и хочу создать какую-нибудь вкладку в буфер обмена на странице, где вы можете добавить продукт, рисунки и т.д., чтобы просмотреть его позже.

Это мой код 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>

но после перезагрузки страницы все скопированные элементы стираются

  • 0
    начать получать кучу файлов cookie, может начать вместо этого рассмотреть loaclStorage. Каждый файл cookie, который вы создаете, должен отправляться с каждым http-запросом на сервер, ограничен по количеству для каждого домена и также ограничен по размеру. Может быстро преобразовывать большие объекты и массивы в localStorage
  • 0
    так как я могу альтернативно сделать это ?? добавить его в базу данных или что ?? я застрял в этот момент и не могу идти дальше, я понятия не имею, как это сделать :( небольшая помощь ?? как я могу создать массив в cookie?
Показать ещё 4 комментария
Теги:
cookies

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");

Надеюсь это поможет!

Удачи!

Поделиться
  • 0
    спасибо, это хорошее начало для меня :) но можете ли вы сказать мне, как добавить несколько элементов, которые вы знаете, если у меня будет две строки в таблице, и я хочу добавить оба как два элемента li в буфер обмена ?? например. <li>element1</li><li>element2</li>
  • 0
    после обновления страницы все данные стираются :(
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню