При клике на карточку товара осуществляется переход на страницу с описанием товара. Как передать информацию через localStorage?

Question

[adeptcity]

Есть интернет магазин. В нем карточки товара.
Весь массив сданными о карточках товара - js/goods.json

function loadGoods() {
    //загружаю товары на страницу
    $.getJSON('/js/goods.json', function (data) {
        let goods = data;
        let out = '';
        for (let key in data){
            out+='<div class="product product1 '+data[key]['class']+'">';
			out+='<button data-art="'+key+'" class="buttonBasket" id="buttonBasket">';
            out+='<img src="/img/cart_icon.svg" alt="">';
            out+='<div>В корзину</div>';
            out+='</button>';
            out+='<a href="/product/" class="a1" data-open="'+key+'">';
            out+='<div class="image">';
            out+='<img src="'+data[key].image+'" alt="">';
            out+='</div>';
            out+='<div class="info">';
            out+='<h3>'+data[key]['name']+'</h3>';
            out+='<div class="info-price">';
            out+=' <div><span class="prise">'+data[key]['cost']+'<small> ₽</small></span></div>';
            out+='</div>';
            out+='</div>';
            out+='</a>';
            out+='</div>';
        }
        $('.goods').html(out);
        $('button.buttonBasket').on('click', addToCart);
		$('a1').on('click', product);
    });
}
function addToCart() {
    //добавляем товар в корзину
    let articul = $(this).attr('data-art');
    if (cart[articul]!=undefined) {
        cart[articul]++;
    }
    else {
        cart[articul] = 1;
    }
    localStorage.setItem('cart', JSON.stringify(cart) );
    showMiniCart();
}

function checkCart(){
    //проверяю наличие корзины в localStorage;
    if ( localStorage.getItem('cart') != null) {
        cart = JSON.parse (localStorage.getItem('cart'));
    }
}

function showMiniCart(){
    //показываю содержимое корзины
    let sum=0;
    for (let w in cart){
        sum = sum + cart[w];
    }
    localStorage.setItem('value-cart', sum);
    document.getElementById('value-cart').innerHTML = 'Колличество товаров '+ localStorage.getItem('value-cart');
}

При клике на кнопку "в корзину" информация через localStorage передается в корзину.
Как при клике на карточку товара передать информацию, что кликнули именно на данную конкретную карточку товара. И как передать эти данные в корзину? Сама страница с описанием товара загружается корректно, но только если я пропишу значение ключа. В примере значение 2301.

function product() {
    //загружаю товары на страницу
    $.getJSON('/js/goods.json', function (data) {
        let goods = data;
        let out = '';
		localStorage.setItem('cart', JSON.stringify(cart) )
			out+='<div class="cart_product">';
			out+='<pre>';
			out+='<div class="left-column-product"><img src="'+data[2301].image+'" alt=""></div>';
			out+='</pre> ';
			out+='<div class="right-column-product">';
			out+='<div class="product-description-product">';
			out+='<h1>'+data[2301]['name']+'</h1>';
			out+='<p class="description">Крем-краска для волос со сбалансированной системой компонентов обеспечивает стойкий результат окрашивания на долгое время натуральным, седым и ранее окрашенным волосам.';
			out+='Обновлённая формула красителя включает в состав экстракт женьшеня и рисовые протеины, увлажняющие и ухаживающие компоненты, которые обеспечивают максимальную стойкость цвета и блеска, защиту от УФ-лучей и исключительное качество волос.</p>';
			out+='<div class="product-configuration">';
			out+='<div class="product-price-product">' +data[2302]['cost']+'   ₽';
			out+='<button data-art="'+2302+'" class="buttonBasket" id="buttonBasket">';
            out+='<img src="/img/cart_icon.svg" alt="">';
            out+='<div>В корзину</div>';
            out+='</button>';
			out+='</div>';
			out+='</div>';
			out+='<pre>';
			out+='</div>';
        $('.productRet').html(out);
        $('button.buttonBasket').on('click', addToCart);
    });
}

Answer 1

[Rst0]

localStorage.setItem( 'name',  value );  // пишите что хотите
localStorage.getItem( 'name' );  // читайте

localStorage.setItem( 'name',  JSON.stringify( object ));  // пишите в т.ч. объект 
let  object = JSON.parse( localStorage.getItem( 'name' ) );  // читайте в т.ч. объект

добавьте в функцию product(кстати где она?) запись в хранилище
$('a1').on('click', product);

Comments

[adeptcity]

Это понятно. Проблема в том, что при клике пытаюсь получить ключ через значение data-open.

function product() { // функция срабатывает при клике на карточку
    let articul2 = $(this).attr('data-open'); //пытаюсь получить ключ
    
    $.getJSON('/js/goods.json', function (data) { //загружаю товары на страницу
        let goods = data;
        let out = '';
		localStorage.setItem('cart', JSON.stringify(cart) )
			out+='<div class="cart_product">';
			out+='<pre>';
			out+='<div class="left-column-product"><img src="'+data[2302].image+'" alt=""></div>'; // вместо "2301" пытаюсь вставить articul2
			out+='</pre> ';
			out+='<div class="right-column-product">';
			out+='<div class="product-description-product">';
			out+='<h1>'+data[2301]['name']+'</h1>'; // вместо "2301" пытаюсь вставить articul2
			out+='<p class="description">Крем-краска для волос со сбалансированной системой компонентов обеспечивает стойкий результат окрашивания на долгое время натуральным, седым и ранее окрашенным волосам.';
			out+='Обновлённая формула красителя включает в состав экстракт женьшеня и рисовые протеины, увлажняющие и ухаживающие компоненты, которые обеспечивают максимальную стойкость цвета и блеска, защиту от УФ-лучей и исключительное качество волос.</p>';
			out+='<div class="product-configuration">';
			out+='<div class="product-price-product">' +data[2302]['cost']+'   ₽';
			out+='<button data-art="'+2302+'" class="buttonBasket" id="buttonBasket">';
            out+='<img src="/img/cart_icon.svg" alt="">';
            out+='<div>В корзину</div>';
            out+='</button>';
			out+='</div>';
			out+='</div>';
			out+='<pre>';
			out+='</div>';
        $('.productRet').html(out);
        $('button.buttonBasket').on('click', addToCart);
    });
}

[Rst0]

adeptcity, возможно, ключ 2302 числовой тип данных, а из data вы 100% получаете строковый
приведите к числу его

[adeptcity]

$('a1').on('click', product); добавлена. Извиняюсь. Забыл ее скопировать

[Rst0]

let articul2 = Number( $(this).attr('data-open') );

[adeptcity]

Вообщем let articul2 = $(this).attr('data-open'); в функции product() не работает.
Не может прочитать значение data-open. Значение articul2 в console.log undefined соответственно. Может я let articul2 = $(this).attr('data-open'); не там размещаю? Или что то еще нужно дописать?

[Rst0]

в консоли выводится, посмотрите пример

[adeptcity]

console.log($(this).data('open')) выдает ƒ open() { [native code] }

[Антон Горецкий]

adeptcity, просто выведи в консоль $(this) - посмотри тот ли элемент ты выбрал

[adeptcity]

Антон Горецкий, таааааак. Выдало что $this выводит объект Windows. т.е. при клике он текущий объект видит окно браузера а не окно товара на которе кликнул. Или я не так рассуждаю?

[Антон Горецкий]

adeptcity, так а зачем ты вообще привязался к этому this? Бери из события event.target - как в примере показали.