如何在JavaScript中将特定元素从对象数组添加到会话存储

Question

我有一段代码，它将字符串数组转换为对象数组，然后在产品卡网格中显示它们及其详细信息：

let allHoodies = [
['Hoodie', 'Purple', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(1).jpg'],
['Hoodie', 'Blue', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(2).jpg'],
['Hoodie', 'Green', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(3).jpg']
]

allHoodies.forEach((element, index) => {
    let obj = {}
    obj.type = element[0]
    obj.color = element[1]
    obj.material = element[2]
    obj.price = element[3]
    obj.imagesrc = element[4]
    allHoodies[index] = obj
})

//Evaluating each hoodie and displaying its information in HTML
allHoodies.forEach(function (hoodie) {
    let card = `
        <div class="card">
            <img class="product-image" src="${hoodie.imagesrc}">
            <h1 class="product-type">${hoodie.type}</h1>
            <p>Color: ${hoodie.color}</p>
            <p>${hoodie.material} <a href="#" id="addToSessionStorage" onclick="">Read more</a> </p>
            <p class="price">${hoodie.price}</p>
            <p><button>Buy</button></p>
        </div>
    `;

    // Add the card to the page
    document.getElementById('product-container').innerHTML += card;
});

如果单击"Read more“，如何将特定对象添加到会话存储中？

集合在一起：JSFiddle

Answer 1

let allHoodies = [
['Hoodie', 'Purple', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(1).jpg'],
['Hoodie', 'Blue', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(2).jpg'],
['Hoodie', 'Green', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(3).jpg']
]



allHoodies.forEach((element, index) => {
    let obj = {}
    obj.type = element[0]
    obj.color = element[1]
    obj.material = element[2]
    obj.price = element[3]
    obj.imagesrc = element[4]
    allHoodies[index] = obj;
})




allHoodies.forEach(function (hoodie) {
    let card = `
        <div class="card">
            <img class="product-image" src="${hoodie.imagesrc}">
            <h1 class="product-type">${hoodie.type}</h1>
            <p>Color: ${hoodie.color}</p>
            <p>${hoodie.material} <a href="#" class="addToSessionStorage" onclick="">Read more</a></p>
            <p class="price">${hoodie.price}</p>
            <p><button>Buy</button></p>
        </div>
    `;
    
    

    // Add the card to the page
    document.getElementById('product-container').innerHTML += card;
});


[...document.querySelectorAll(".addToSessionStorage")].forEach((readMoreBtn, index) => {
    readMoreBtn.addEventListener('click', (e) => {
   
    sessionStorage.setItem(index, JSON.stringify(allHoodies[index]));
  })
});

Answer 2

我将向每个id对象添加一个hoodie。你可以用index来做这个。然后，您需要使用类似于onclick的东西来填充addToStorage(${hoodie.id})处理程序。在addToStorage函数中，可以实际将项添加到存储中。

更新你的小提琴并张贴在下面：

​

let allHoodies = [
  ['Hoodie', 'Purple', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(1).jpg'],
  ['Hoodie', 'Blue', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(2).jpg'],
  ['Hoodie', 'Green', 'Cotton', '$39.99', 'image/items/hoodies/hoodie(3).jpg']
]

allHoodies.forEach((element, index) => {
  let obj = {}
  obj.id = index
  obj.type = element[0]
  obj.color = element[1]
  obj.material = element[2]
  obj.price = element[3]
  obj.imagesrc = element[4]
  allHoodies[index] = obj
})

//Evaluating each hoodie and displaying its information in HTML
allHoodies.forEach(function(hoodie) {
  let card = `
        <div class="card">
            <img class="product-image" src="${hoodie.imagesrc}">
            <h1 class="product-type">${hoodie.type}</h1>
            <p>Color: ${hoodie.color}</p>
            <p>${hoodie.material} <a href="#" onclick="addToStorage(${hoodie.id})">Read more</a> </p>
            <p class="price">${hoodie.price}</p>
            <p><button>Buy</button></p>
        </div>
    `;

  // Add the card to the page
  document.getElementById('product-container').innerHTML += card;
});

function addToStorage(id) {
  const hoodie = allHoodies[id]
  console.log(hoodie)
  // sessionStorage can only store strings
  // commented out because sessionStorage cannot be set in the SO environment
  // sessionStorage.setItem("someKey", JSON.stringify(hoodie))
}

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  max-width: 300px;
  margin: 10px;
  text-align: center;
}

.product-type {
  color: #f2be1a;
}

.price {
  color: #000000;
  font-size: 22px;
}

.card button {
  outline: 0;
  color: #000000;
  text-align: center;
  font-size: 18px;
}

#product-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px;
}

.product-image {
  width: 100%;
}

<div id="product-container"></div>

​