Удалить хранилище сессии - проект корзины покупок - PullRequest
Новая
       38

Удалить хранилище сессии - проект корзины покупок

0 голосов
/ 26 декабря 2018

Надеюсь, это хороший вопрос.Я работаю над проектом корзины покупок.Я искал в интернете различные учебники по корзинам.Я пытаюсь написать свой ванильный Javascript.У меня проблема с удалением элементов корзины покупок из хранилища сеансов.

Ниже показано, что в данный момент находится в моем хранилище сеансов.Как вы видите, это массив объектов. 

[{"id":"8","name":"Candy 
Skull","price":"20000","image":"../images/candyskull- 
min.JPG","qty":"1"},{"id":"5","name":"Upsidedown 
House","price":"20000","image":"../images/upsidedownhouse- 
min.JPG","qty":"1"},{"id":"6","name":"Brooklyn 
Window","price":"30000","image":"../images/brooklynwindow- 
min.JPG","qty":"1"},{"id":"4","name":"Hand That 
Feeds","price":"40000","image":"../images/handthatfeeds- 
min.JPG","qty":"1"}]

Я хочу пройтись по массиву и удалить соответствующий объект из хранилища корзины.

Ниже приведен код JS, используемый длягенерировать кнопки .remove-from-cart.Как видите, он включает в себя всю информацию о наборе данных. 

<td>
   <span class="remove-from-cart">
      <b data-id="${value.id}" data-name="${value.name}" data- 
      price="${value.price}" data-image="${value.image}" data- 
      qty="${value.qty}">X</b>
   </span>
</td>

Чтобы проверить функциональность того, что я сделал до сих пор, вы можете посетить www.dancruzstudio.com/shop

Функция, котораяЯ не могу заставить работать должным образом, это функция removeFromStorage ().По какой-то причине при сравнении объекта с объектами в массиве я никогда не получаю истинное логическое значение, даже если в корзине есть элементы, которые должны совпадать.Куда я иду не так?Я надеюсь, что кто-то может помочь.Ниже приведена копия моего кода JS.

Метод, который я использую, имеет идентичное значение набора данных в кнопке удаления элемента, сгенерированной JS, а затем анализирует этот набор данных в объект и сравнивает его с объектами вмассив хранения сессий, который называется shopItems внутри функции removeFromStorage ().Я надеюсь, что этой информации достаточно, чтобы кто-то увидел мою проблему.Заранее спасибо. 

    // Remove item from DOM
    document.querySelector('#cart-list').addEventListener('click', 
    removeFromCart)

    function removeFromCart(e) {
    if(e.target.parentElement.classList.contains('remove-from-cart')) {
    //Remove from DOM
     e.target.parentElement.parentElement.parentElement.remove(); 

     //Remove from Session Storage
            removeFromStorage(e.target.dataset);
     }
     }

     // remove from Session storage
     function removeFromStorage(removedItem){

    let shopItems;
    if(sessionStorage['sc'] == null){
        shopItems = [];
    } else {
        shopItems = JSON.parse(sessionStorage['sc'].toString());
    }

    var compare = JSON.parse(JSON.stringify(removedItem))

    shopItems.forEach(function(item, index){

        if(compare === item){
            console.log(compare);
            console.log(item);
            // shopItems.splice(index, 1);
        }
    });
    sessionStorage['sc'] = JSON.stringify(shopItems);
    }

1 Ответ

0 голосов
/ 26 декабря 2018

Нельзя сравнивать подобные объекты. 

let a = {p:1};
let b = {p:1};
console.log(`a ===b ? ${a===b}`);

Если ваши объекты довольно просты, вы можете попробовать сравнить их строковое представление: 

let a = {p:1};
let b = {p:1};
const compare = (x,y) => {
  return JSON.stringify(x) === JSON.stringify(y);
}

console.log(`a === b ?  ${compare(a,b)}`);

или напишите свою собственную функцию сравнения (которая может быть сложной):

Сравнить объекты JavaScript

Посколькуваши объекты украшены идентификатором, проще всего было бы идентифицировать их следующим образом: 

let storage = [{"id":"8","name":"Candy Skull", "price":"20000","image":"../images/candyskull- min.JPG","qty":"1"},{"id":"5","name":"Upsidedown House","price":"20000","image":"../images/upsidedownhouse- min.JPG","qty":"1"},{"id":"6","name":"Brooklyn Window","price":"30000","image":"../images/brooklynwindow- min.JPG","qty":"1"},{"id":"4","name":"Hand That Feeds","price":"40000","image":"../images/handthatfeeds- min.JPG","qty":"1"}];

let items = [{"id":"6","name":"Brooklyn Window","price":"30000","image":"../images/brooklynwindow- min.JPG","qty":"1"}, {"id":"5","name":"Upsidedown House","price":"20000","image":"../images/upsidedownhouse- min.JPG","qty":"1"}];
const pluck = (acc, crt) => {
acc.push(crt.id);
return acc;
};

let storageIndexes = storage.reduce(pluck, []);
let itemsIndexes = items.reduce(pluck, []);
let removeIndexes = [];
itemsIndexes.forEach(id => removeIndexes.push(storageIndexes.indexOf(id)));
console.log('storage', storage);
console.log('removed items', items);
removeIndexes.sort().reverse().forEach(index => storage.splice(index,1));
console.log('remaining storage', storage);
...