Сохраните и загрузите корзину с LocalStorage - PullRequest
Новая
       76

Сохраните и загрузите корзину с LocalStorage

2 голосов
/ 11 марта 2019

У меня есть следующий код: 

inames = [];
iqtyp = [];
iprice = [];

function bestel() {
  inames.push(document.getElementById('artikel').innerHTML);
  iqtyp.push(parseInt(document.getElementById('hoeveel').value));
  iprice.push(parseInt(document.getElementById('prijs').innerHTML));
  displayCart();
}

function displayCart() {
  cartdata = '<table><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th></tr>';
  total = 0;
  for (i = 0; i < inames.length; i++) {
    total += iqtyp[i] * iprice[i];
    cartdata += "<tr><td>" + inames[i] + "</td><td>" + iqtyp[i] + "</td><td>" + iprice[i] + "</td><td>" + iqtyp[i] * iprice[i] + "</td><td><button onclick='delElement(" + i + ")'>Delete</button></td></tr>";
  }
  cartdata += '<tr><td></td><td></td><td></td><td>' + total + '</td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function save() {
  localStorage.setItem("car", cartdata);
}

function load() {
  document.getElementById("cart").innerHTML += localStorage.getItem("car");
}

Я хочу, чтобы пользователь мог сохранить корзину и загрузить ее снова, когда он обновит страницу.Как я могу это сделать?

Теперь я добавил функцию сохранения и загрузки, но теперь она не добавляет элементы в таблицу, а просто копирует всю таблицу.

Ответы [ 2 ]

0 голосов
/ 12 марта 2019

Вы действительно хотите сохранить эту сторону сервера данных, так как пользователь может получить доступ к вашему сайту / приложению с нескольких разных компьютеров.HTML5 localstorage является локальным для каждой машины.

Что сводится к тому, что это система, в которой пользователи вошли в систему анонимно, но с уникальным идентификатором на стороне сервера, после взаимодействия с вашим приложением.После того как они войдут (создадут аккаунт), вы объедините их аккаунт с анонимным аккаунтом.Теперь, когда пользователь входит на ваш сайт со своего другого / рабочего компьютера, корзина покупок все еще там.

Это не так просто настроить с нуля, так что есть много продуктов / систем для разработчиков, которые можно сделатьэто тяжелая работа для вас, такая как Firebase .

0 голосов
/ 11 марта 2019

Вы можете использовать HTML5 localstorage , так как информация, хранящаяся в переменных javascript, сбрасывается при обновлении страницы

Но лучшим способом было бы сохранить эту информацию в бэкэнде (или веб-сервере).через некоторый остальной вызов API.Поэтому, даже если пользователь входит в систему с другого компьютера, он видит свои товары, которые он добавил в корзину.

В идеале вы должны хранить данные в localStorage, а не в HTML - поскольку данные более манипулируют, измените ваш код:

inames = [];
iqtyp = [];
iprice = [];

function bestel() {

  load()

  inames.push(document.getElementById('artikel').innerHTML);
  iqtyp.push(parseInt(document.getElementById('hoeveel').value));
  iprice.push(parseInt(document.getElementById('prijs').innerHTML));
  displayCart();

  save()
}

function displayCart() {
  cartdata = '<table><tr><th>Product Name</th><th>Quantity</th><th>Price</th><th>Total</th></tr>';
  total = 0;
  for (i = 0; i < inames.length; i++) {
    total += iqtyp[i] * iprice[i];
    cartdata += "<tr><td>" + inames[i] + "</td><td>" + iqtyp[i] + "</td><td>" + iprice[i] + "</td><td>" + iqtyp[i] * iprice[i] + "</td><td><button onclick='delElement(" + i + ")'>Delete</button></td></tr>";
  }
  cartdata += '<tr><td></td><td></td><td></td><td>' + total + '</td></tr></table>';
  document.getElementById('cart').innerHTML = cartdata;
}

function save() {
  localStorage.setItem("inames", inames.join("|"))
  localStorage.setItem("iqtyp", iqtyp.join("|"))
  localStorage.setItem("iprice", iprice.join("|"))
}

function load() {

   inames = (localStorage.getItem("inames") || "").split("|")
   iqtyp = (localStorage.getItem("iqtyp") || "").split("|")
   iprice = (localStorage.getItem("iprice") || "").split("|")
}

Вы также можете добавить обработку исключений при настройке элементов, проверьте здесь: https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem

...