如何使用本地存储在其他页面上显示数据答案

【问题标题】：How to use local Storage to show data on other page如何使用本地存储在其他页面上显示数据
【发布时间】：2018-10-27 22:41:05
【问题描述】：

我的第一页上有一个购物车，我希望在用户转到另一页时显示所有已选择的商品。

我是 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);
}

【问题讨论】：

我认为您不应该使用localStorage 来存储购物车数据，因为该数据不会暴露给您的服务器端代码，当用户使用不同的浏览器时不会移动或计算机，并受到期和存储限制。改为使用服务器端会话状态。
quantityupdate() 不返回任何内容。把任何东西串起来是没有意义的。
嘿戴。我在购物车内也有一张图片。所以如果我使用数据库会更好？
@Dai 评论只有在网站上有用户登录系统时才真正有意义。否则，如果他们切换设备或浏览器，您将不知道用户是谁

标签： javascript html dom local-storage increment

【解决方案1】：

尝试编辑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 
}

【讨论】：