localstorage
 

ls

Сначала нужно извлечь корзину из хранилища, преобразовать ее в объект, и работать с корзиной, добавляя в нее или удаляя из нее. Только надо определиться с добавлением, что нужно сделать в корзине, если добавляемый товар в ней уже есть - увеличить количество товара или оставить как есть?

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

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

Спасибо! она странная, наверное, потому что я только учусь

в корзину добавляется по событию onclick, потом при перезагрузке страницы по этому же событию перезаписывается все

Все:) Спасибо большое:) Все заработало:)

Зачем? Кто добавляет товар в корзину, пользователь или браузер?

Корзина, это, объект с набором методов, в случае объектно-ориентированного стиля программирования, или набор функций, в случае процедурного стиля программирования. Этот набор включает в себя следующие методы/функции: получение корзины из хранилища; запись корзины в хранилище; получение состояния корзины - количество товаров в ней и их сумма; помещение товара в корзину; изменение состояния товара в корзине; удаление товара в корзине; удаление всех товаров в корзине.

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

А добавление товара к процессу загрузки страницы отношения не имеет.

Мне кажется просто, что я неправильно добавляю их в корзину и не понимаю в чем ошибка

Если судить по написанному вами, вы не понимаете, вернее не представляете главного - что есть корзина. А с вероятностью 100% можно утверждать, что вы сталкиваетесь с ней ежедневно, в реальном магазине, и не важно используете ли вы при этом тележку, пакет или держите товар в руках до оплаты в кассе.

Если бы кто-то оцифровал состояние торгового зала, а это товары, покупатели, среди которых и вы, обслуживающий этот зал персонал, то это бы и была картина отражающая покупку виртуальную. Конечно, не все происходящее в реальности равно виртуальному, но тождественность есть. Можно сказать, что в торговом зале постоянно проходят торговые сделки, при этом корзина не просто средство для удобства покупателя, но и очень важная составляющая этих сделок. Пользователь, конечно, воспринимает корзину как "авоську", а вот для продавца, это инструмент, важная деталь в цепи обратной связи покупатель-магазин.

Только об обратной связи можно целые романы писать, но можно сказать просто, утверждая - в жестких условиях конкуренции без нее магазин обречен. Обратная связь, это необходимость, она есть во многих сферах и устройствах. Например, вы бы на своем телефоне не смогли бы слушать музыку, если бы его НЧ усилитель не имел отрицательной обратной связи между выходным и входным каскадами. Усилитель бы просто возбуждался при определенных условиях, и вы бы слышали ужасающую какофонию.

В сетевых магазинах виртуальную корзину размещают как и на сервере, так и на клиенте. В первом случае такая корзина может иметь минимальный набор данных о товаре, так как все подробности о нем сервер легко может получить и базы данных. Во втором случае требуется более расширенная информация о товаре, так как клиенту обращаться не к кому, а если к серверу, то в чем тогда выгода. Если корзина на сервере, то обратная связь, можно так сказать, включена, если корзина на клиенте, то такую связь нужно обязательно организовать. Почему обязательно, на это тоже одним словом не ответить, но давайте рассмотрим такую ситуацию.

В вашем магазине в наличие имеется дамская сумочка в количестве одна штука, пусть будет эксклюзив и более не предвидится. Эту сумочку в свою корзину положила дама "А", она как раз к ее кофте подходит, а дама "Б" в свою корзину потому, что она гармонирует с ее юбкой. Не судите меня строго, я не знаю точно по каким принципам, приметам, дамы подбирают себе сумочки. Важное тут не это, а то, что обе дамы желают ее приобрести, но каждая из них, положив в свою корзину эту сумочку не подозревает, что у нее есть конкурент. А у вашего магазина корзина на клиенте, обратной связи отражающей состояние товара в магазине нет, и процесс "ложу товар в свою корзину" у каждого покупателя изолированный, то есть лично для него в текущий момент времени он единственный в магазине, хотя в реальности, это не всегда так.

Непосредственно торговая сделка происходит при оформлении заказа, то есть одна из дам узнает о том, что товара нет только в момент попытки оформить заказ, в вашем магазине. Тут возникают вопросы, не юридические, а морально-этические, но с возможно более со скандальными последствиями:
Кто из дам имеет больше прав на сумочку, та что положила первой товар в корзину или которая первая оформила заказ?
Обязан ли магазин предупреждать покупателя, что товар стал недоступным, его выбрали, уже на этапе его помещения в корзину?

И вопросов такого плана может быть много. В общем, не страшно в процессе написания кода допустить ошибку или написать неудачную по структуре или применению стандартных функций языка функцию. Знания и опыт приходят со временем, а вот неправильная постановка решаемой задачи может впоследствии потребовать все переделывать заново. А в описании языка программирования вы не найдете какая корзина должна быть у вас, где она должна храниться, это определяется множеством факторов и условий. Это должно быть первичным, а функции/методы уже вторичные, как производные от первичного - факторов и условий. Не понимание этого и приводит к написанию функций типа вашей, даже если она будет написана грамотно, она далека от того, чтобы ее можно было назвать правильной.