Блог

Главная - Вопросы по программированию - Сохраните несколько значений одного типа в localStorage, затем извлеките значения

Сохраните несколько значений одного типа в localStorage, затем извлеките значения

#javascript #jquery #local-storage

#javascript #jquery #локальное хранилище

Вопрос:

Мое главное требование — сгенерировать URL-адрес, нажав на соответствующую кнопку. Например, если я нажму на зеленую и красную кнопки, то он должен добавить amp;_colour=green,red в URL и аналогично для кнопки Gender после сохранения и получения значений из localStorage.

example.com/product-category/glasses/?_gender=women,menamp;_colour=green,red

 <div class="main-section">
    <div class="section">
        <button data-gender="men">Men</button>
        <button data-gender="women">Women</button>
    </div>
    <div class="section">
        <button data-colour="green">green</button>
        <button data-colour="red">Red</button>
    </div>
</div>
 
 jQuery('.section button').click(function(e){
    e.preventDefault();
    var gender = jQuery(this).data("gender");
    var colour = jQuery(this).data("colour");
    localStorage.setItem("gender", gender);
    var x = localStorage.getItem("gender");
    console.log(x);
});

Вопрос в том, как сохранить несколько значений для одного и того же типа и получить значения для создания URL.

Заранее спасибо.

Ответ №1:

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

Оттуда вы можете использовать цикл для создания объекта из выбранных значений, добавив новый data-category атрибут к .section элементам, чтобы предоставить ключи в этом объекте.

Наконец, вы можете использовать URLSearchParams объект для создания обновленной строки запроса из этого объекта, прежде чем применять history.pushState() его для обновления текущего URL.

Соедините все это вместе, и вы получите это:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-section">
  <div class="section" data-category="gender">
    <button data-value="men">Men</button>
    <button data-value="women">Women</button>
  </div>
  <div class="section" data-category="colour">
    <button data-value="green">green</button>
    <button data-value="red">Red</button>
  </div>
</div>
 
 jQuery($ => {
  let $buttons = $('.section button').click(e => {
    e.preventDefault();
    $(e.target).toggleClass('active');
    let data = buildButtonDataObject();
    let querystring = new URLSearchParams(data).toString();

    localStorage.setItem('data', data);
    console.log(data);
    history.pushState(data, 'Page title here', querystring);
    console.log(querystring);
  });
});

let buildButtonDataObject = () => {
  let obj = {};
  $('.section:has(.active)').each((_, s) => obj[s.dataset.category] = $(s).find('button.active').map((_, b) => b.dataset.value).get());
  return obj;
}

Рабочий пример

В примере jsFiddle вы можете увидеть, что строка запроса обновляется при нажатии кнопок, открыв панель «Сеть» в инструментах разработки.

Комментарии:

1. Это здорово. Но можем ли мы просто утешить вывод URL вместо history.pushState?

2. Конечно, просто прокомментируйте строку pushState и добавьте console.log(querystring) , где вам это нужно

3. Я думаю, что есть небольшая коррекция localStorage.setItem(‘data’, querystring); нам нужно передать querystring вместо data . Я прав?

4. Вы можете сделать либо то, либо другое. Я бы предложил использовать необработанный data объект, чтобы вы могли работать с ним напрямую, когда это необходимо, вместо того, чтобы ограничиваться строкой.

5. Спасибо 🙂 Последний вопрос. Возможно ли это, чтобы показывать только соответствующие атрибуты при нажатии. Например, если я нажму на цветную кнопку, тогда будет отображаться только цвет. Прямо сейчас он показывает оба атрибута, такие как «пол = amp; amp; цвет = красный»

Ответ №2:

Вы хотите сделать функцию 1 click и применить ко всем кнопкам в этом и назначить локальное хранилище?

   $('.section button').each(function () {
    var $this = $(this);
    $this.on("click", function () {
      var gender = $this.data("gender");
      var colour = $this.data("colour");
      if (gender != undefined) {
        localStorage.setItem("gender", gender);
      }
      if (colour != undefined) {
        localStorage.setItem("colour", colour);
      }
    });
  });

Я добавляю функцию щелчка ко всем элементам этого класса «.кнопка раздела» и проверяю данные и присваиваю их в локальном хранилище.

Простой способ: просто сделайте onclick to button и передайте параметр функции и назначьте его в localstorage.

надеюсь, это поможет вам.

извините за плохой английский.