Как использовать локальное хранилище для отображения данных на другой странице - PullRequest
Новая
       7

Как использовать локальное хранилище для отображения данных на другой странице

0 голосов
/ 28 октября 2018

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

Я новичок в javascript, поэтому я не мог понять, как сохранить эти данные в локальном хранилище. Главное для меня сейчас - как сохранить увеличиваемое количество.

ПРИМЕЧАНИЕ: Я использую один скрипт для двух страниц. 

// this below function is executed when user on page ONE click on the button the quantity increase.
function addtocartbtnclicked(event) {
  var button = event.target;
  var shopitem = button.parentElement.parentElement;
  var title = shopitem.querySelectorAll('h1')[0].innerText;
  var price = shopitem.querySelectorAll('.card .price')[0].innerText;
  var imgsrc = shopitem.querySelectorAll('.card .my-img')[0].src;
  console.log(title, price, imgsrc);
  additemtocard(title, price, imgsrc);
  updatetotal();
  quantityupdate();
}

// this function increase the quantity
function quantityupdate() {
  var div = document.querySelectorAll('.each-cart-row');
  var qtytotal = 0;
  for (var i = 0; i < div.length; i++) {
    var card = document.querySelectorAll('.add-to');
    card = 1;
    qtytotal = qtytotal + card;
  }

  console.log(qtytotal);
  var count = document.querySelector('.totalqty').innerText = qtytotal;
}
var jsonStr = JSON.stringify(quantityupdate());
localStorage.setItem("cart", jsonStr);

// this function is for page TWO where another item will be added when the button is clicked
function addtocartbtnclickedpagetwo() {
  var pageimg = document.querySelectorAll('.exzoom_img_ul img')[0].src;
  var pagetitle = document.querySelector('#upper-area h3').innerText.slice(62);
  var pageprice = document.querySelector('#last-list #product-total').innerText;
  var pageqty = document.querySelector('#myform #input-number').value;
  console.log(pageimg, pagetitle, pageprice, pageqty);
  addtocartitempage(pageimg, pagetitle, pageprice, pageqty);
  updatetotal();
  var cartValue = document.querySelector('.totalqty')
  cartValue = localStorage.getItem("cart");
  var cartObj = JSON.parse(cartValue);
}

1 Ответ

0 голосов
/ 28 октября 2018

попробуйте отредактировать функцию quantityupdate, чтобы она фактически сохранила qtytotal значение переменной в локальном хранилище: 

function quantityupdate() {
    var div = document.querySelectorAll('.each-cart-row');
    var qtytotal = localStorage.getItem( "cart") || 0;
    for (var i = 0; i < div.length; i++) {
        var card = document.querySelectorAll('.add-to');
           card = 1;
           qtytotal = qtytotal + card;
    }

    localStorage.setItem( "cart", qtytotal);
    var count = document.querySelector('.totalqty').innerText = qtytotal;
    return 
}
...