there is a list of products, when I click on a button, I get information about the product and put it in localstorage and display this product on another page, but when I add the second product, it reloads the first one, because I have one key, tell me how to make a unique one for each product key.

I get the keys:

function new_page(el){ var img = $(el).parent().parent().find(".img").find(".fancyboxGallery").find("img").attr("src"); var name = $(el).parent().find(".name").html(); var articul = $(el).parent().find(".props").eq(1).html(); var price = $(el).parent().find(".props").eq(5).html(); var ost = $(el).parent().find(".props").eq(6).html(); var sum = $(el).parent().find(".props").eq(7).html(); localStorage.setItem("flag",true); localStorage.setItem("startPoint",img); localStorage.setItem("finishPoint",name); localStorage.setItem("distance",articul); localStorage.setItem("cost",price); localStorage.setItem("ostatoc",ost); localStorage.setItem("summa",sum); }

I bring them to another page

 window.onload = function(){ if(localStorage.getItem("flag")){ var parent = $(".myTable"); $("<tr>" + "<td><img src='" + localStorage.getItem("fstartPoint") + "'>" + "</td>" + "<td>" + localStorage.getItem("finishPoint") + "</td>" + "<td>" + localStorage.getItem("distance") + "</td>" + "<td>" + localStorage.getItem("cost") + "</td>" + "<td>" + localStorage.getItem("ostatoc") + "</td>" + "<td>" + localStorage.getItem("summa") + "</td>" + "</tr>").appendTo(parent); } else { document.getElementsByClassName("page").item(0).innerHTML+="Ошибочка"; } }

product card (its markup)

 <div class="itemBlock"> <div class="img" title="Гирлянда С днем рождения! (европодвес.подвесные цифры от 4 до 6)"> <a rel="group" class="fancyboxGallery" href="pub/preview/72/1474361697_72086611f34b5ac63b779ac3dfa1ee97.jpg"><img src="pub/preview/72/1474361697_72086611f34b5ac63b779ac3dfa1ee97.jpg" width="295" height="260" alt=""/></a> </div> <div class="bottom"><div class="props name">Наименование: Гирлянда С днем рождения! (европодвес.подвесные цифры от 4 до 6)</div> <div class="props">Артикул: 9-14-0005</div> <div class="props">Формат: 1м 92 см</div> <div class="props">Отделка: </div> <div class="props">Текст внутри: нет</div> <div class="props">Код цены: 9-14</div> <div class="props">Остаток:Много</div> <div class="props">500p</div> <button class="toFavorite" onclick="new_page(this)">Добавить в избранное</button><br/> <input type="button" value="Очистить" onclick="localStorage.clear();"/> Цена доступна после регистрации</div> </div>

    1 answer 1

    You can use JSON.stringify and JSON.parse .

     var products = { 'product-01': {}, 'product-02': {} }; // Сохраняем: localStorage.setItem('products', JSON.stringify(products)); // Получаем: var storedProducts = localStorage.getItem('products'); console.log('storedProducts: ', JSON.parse(storedProducts));

    This option should be enough to store simple string values.

    • I have a dynamically changing number of products and in localStorage I will put the data on the products key, with the second addition they simply redraw it - lesha310392
    • now my code just overwrites the already set value, and how to make it add a new one? - lesha310392
    • As in the example above: x = JSON.parse(localStorage.getItem('products')) - this will be an object with products from the repository. Modify it and write it back to the repository. localStorage.setItem('products', JSON.stringify(x)); - YozhEzhi