Блог

Итак, у меня есть эта функция addToCart , в Javascript которой при нажатии на кнопку имя элемента и сумма сохраняются LocalStorage , а затем я получаю данные innerHTML . Проблема здесь в том, что всякий раз, когда я нажимаю дважды или более раз на эту кнопку, данные перезаписываются.

Например, я хочу добавить одну куклу в корзину, затем я хочу добавить еще две куклы, затем сохраняется только>

Кукла: 2

но я хочу, чтобы это было

Кукла: 1
Кукла: 2

Мой код:

 const lookUpItem = matches.map((match, idx)=>
    `<h2 id="name"><span id="${match.itemName}">${match.itemName}</span></h2>
     <p>Amount: <span id="am_${idx}">${match.amount1}</span></p>
     <button onclick="addToCart('${match.itemName}', 'am_${idx}')" id="add">Add to Cart</button>
                    </span></small>
            </div>`
        ).join('');
        itemList.innerHTML = lookUpItem;

//outPut is id of an <ul> in HTML
const outPutHTML = document.getElementById("outPut");

//nm, am - variables from array.map
//saves line to localStorage and adds line to outputHTML
function addToCart(nm, am) {
    {
        const itemName = nm;
        const amount = document.getElementById(am).innerText;
        localStorage.setItem(itemName, amount);
        outPutHTML.innerHTML  = `${itemName}: ${amount}<br />`;
    }
}

//shows all data in Local Storage in outPutHTML
for(let i = 0; i < localStorage.length; i  ) {
    const name = localStorage.key(i);
    const value = localStorage.getItem(name);
    outPutHTML.innerHTML  = `${name}: ${value} <br />`;
}
 

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

Вы не можете хранить два элемента с одним и тем же ключом в локальном хранилище.

Лучше сначала подумать, как вы будете хранить их в памяти — без учета языкового хранилища.

Например, вы могли бы представить себе такую структуру:

 items = [
    { name: "Doll", value: "1" },
    { name: "Doll", value: "2" }
];
 

И если вам нужно добавить еще один, вы просто делаете

 items.push({ name: "Doll", value: "15" });
 

И как только вы определили свою структуру памяти, вы можете просто записать всю эту структуру в локальное хранилище, используя один жестко запрограммированный ключ:

 localStorage.setItem("items", JSON.stringify(items));
 

И для чтения этой информации в начале вашей страницы:

 items = JSON.parse(localStorage.getItem("items") || "[]");
 

Существует || для обработки случая, когда данные еще не присутствуют в локальном хранилище, и в этом случае вы хотите получить пустой массив.

Итак, вот часть вашего адаптированного кода. Комментарии — это ваши комментарии, поэтому вы можете видеть, где код вписывается:

 //shows all data in Local Storage in outPutHTML
const items = JSON.parse(localStorage.getItem("items") || "[]");
outPutHTML.innerHTML = items.map(({name, value}) => `${name}: ${value}<br>`)
                            .join("");

//saves line to localStorage and adds line to outputHTML
function addToCart(name, am) {
    const value = document.getElementById(am).innerText;
    items.push({name, value});
    localStorage.setItem("items", JSON.stringify(items));
    outPutHTML.innerHTML  = `${name}: ${value}<br>`;
}