Скорректируйте мой js код
 

Есть js код. Он динамически получает от сервера данные про товар (его название, id, цвет, размер и цену) и выводит эти данные в браузер. Также при нажатие на цену товара, этот товар добавляется в localStorage и потом, на странице с корзиной от-туда берется вся инфа.

Хотелось бы, что-бы в объекте cart (создаю в коде) была такая структура:

var cart = {
    id_objecta : {
        "id" : id,
        "name" : name,
        "cost" : cost
    }
};

Вот код:

var cart = {};

function init () {
	$.post(
		"../templates/core.php",
		{
			"action" : "init"
		},
		showGoods
	);
};

function showGoods (data) {
	data = JSON.parse(data);

/*	console.log(data);*/

	var out = '';

	for (var key in data) {
		out += '<div class="single_goods" style="padding-right: 0px; padding-left: 0px;">';
		out += '<b> ЗАМОК: ' + data[key].name + '</b>';
		out += `<img src="${data[key].image}">`; 
		out += '<p> Размер: ' + data[key].size + '</p>';
		out += '<p> Цвет: ' + data[key].color + '</p>';
		out += '<div class="btn-group" style="width: 100%;">';
		out += '<button type="button" class="btn btn-warning cost add" style="width: 100%; font-size: 1.7rem;" data-art="'+data[key].id+'" data-name="'+data[key].name+'"> Купить за: ' + data[key].cost +  '$</button>';
		out += '</div>';
		out += '</div>';
	}
	$('#goods').html(out);
	$('.add').on("click", addToCart);
};

function addToCart () {
	var articul = $(this).attr('data-art');
	var name = $(this).attr('data-name');

	cart['name'] = name;

	if (cart[articul] != undefined) {
		cart[articul]++;
	}
	else {
		cart[articul] = 1;
	}

	localStorage.setItem('cart', JSON.stringify(cart));

	showCart();
};

function checkCart () {
	if (localStorage.getItem('cart') != null) {
		cart = JSON.parse(localStorage.getItem('cart'));
	}
};

function showCart () {

	var out = '';
	for (var w in cart) {
		out += '<span> ID товара: '+ w +'</span> <br>'+'<span> Кол-во товара: '+ cart[w] +'</span> <br> <br>';
	}
	$('#mini-cart').html(out);
};

$(document).ready(function () {
	init();
	checkCart();
	showCart();
});

Вопрос: как осуществить сохранение объекта в том виде в котором я хочу? Сейчас все сохраняется вот так:

var cart = {
    "id" : id,
    "name" : name
};

Пожалуйста, не игнорируйте меня, помогите! Если я что-то непонятно объяснил, напишите и я объясню лучше или скину ту или иную часть кода!

Почему именно в таком виде? Да и вообще, если рассматривать продажу как связь покупателя с магазином, что для интернет магазина очень важно, хранение корзины в локальном хранилище браузера не лучший выбор.

Хорошо, буду хранить данные в бд, значит надо:
1)Создать новую таблицу где будут храниться товары, которые берет пользователь
2)Сравнивать потом эти значения с основной таблицей с товарами и если товары совпали => значит они есть => отправляем сообщение человеку на почту

1) Да, но в ней хранятся не товары, а идентификаторы товаров и их количество, и каждая запись товара связана с регистрированным пользователем по его идентификатору.

2) Не так. Во первых - если магазин ведет учет товаров, то значит наличие товара на странице пользователя А в момент времени Т еще не означает, что запрос на добавление его в корзину во время Тn будет разрешен. То есть кто-то этот товар уже заказал, а он в наличии был один. Это означает, что запрос на добавление в корзину, это проверить есть ли уже такой в корзине и если есть, то это либо смена его количества, либо удаление из корзины. Если нет, значит запрос в таблицу товаров на его наличие и если есть, то добавление его ID и количества в таблицу корзины. В противном случае сообщать, что товар уже продан.

Сообщение на почту отправляют не по мере добавления товаров в корзину, а при оформлении заказа, с полным описанием товаров в корзине (объединение запросов к таблице корзины и таблице товаров), общее количество и стоимость. Плюс реквизиты покупателя - по какому адресу отправка и т.п.

А далее отправление, получение... после чего корзина этого заказа этого пользователя очищается.

спасибо