{"id":9517,"date":"2024-01-09T18:03:00","date_gmt":"2024-01-09T18:03:00","guid":{"rendered":"https:\/\/codehim.com\/?p=9517"},"modified":"2024-01-22T16:05:05","modified_gmt":"2024-01-22T11:05:05","slug":"javascript-add-to-cart-with-local-storage","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/","title":{"rendered":"JavaScript Add to Cart with Local Storage"},"content":{"rendered":"<p>This code snippet provides functionality to manage a shopping cart using JavaScript and local storage. It allows you to add items to a cart, display the cart&#8217;s contents, and empty the cart.<\/p>\n<p>This code works by utilizing JavaScript functions for adding, retrieving, and deleting cart items in local storage. It helps you create a simple shopping cart for your website, making it easy to manage items added by users.<\/p>\n<p>You can use this code in your e-commerce web projects to implement a <a href=\"https:\/\/codehim.com\/collections\/javascript-shopping-cart-examples-with-demo\/\" target=\"_blank\" rel=\"noopener\">user-friendly shopping cart featur<\/a>e. It helps improve the user experience by allowing customers to add and view items in their cart.<\/p>\n<h2>How to Create Add To Cart Using JavaScript and Local Storage<\/h2>\n<p>1. First of all, load the <a href=\"https:\/\/necolas.github.io\/normalize.css\/\" target=\"_blank\" rel=\"noopener\">Normalize CSS<\/a> by adding the following CDN link into the head tag of your HTML document.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/normalize\/5.0.0\/normalize.min.css\"&gt;<\/pre>\n<p>2. Create the HTML structure for the shopping cart as follows. It contains sections for the header, main content, and buttons for adding items to the cart. Ensure the necessary classes are in place for styling and functionality.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;header class=\"header\"&gt;\r\n  &lt;div class=\"header__wrapper\"&gt;\r\n    &lt;h1 class=\"header__headline\"&gt;LocalStorageCart&lt;\/h1&gt;\r\n\r\n    &lt;section class=\"cart\"&gt;\r\n      &lt;h2 class=\"cart__headline\"&gt;My cart&lt;\/h2&gt;\r\n      &lt;button id=\"js-delete-cart\"&gt;Empty cart&lt;\/button&gt;\r\n      &lt;ul class=\"cart__shoppingList\" id=\"js-item-list\"&gt;&lt;\/ul&gt;\r\n    &lt;\/section&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/header&gt;\r\n\r\n&lt;main class=\"main\"&gt;\r\n  &lt;ul class=\"main__wrapper\"&gt;\r\n    \r\n    &lt;li class=\"teaser\"&gt;\r\n      &lt;div class=\"teaser__wrapper\"&gt;\r\n        &lt;h3 class=\"teaser__headline\"&gt;Item 01&lt;\/h3&gt;\r\n        &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla numquam quidem voluptate deleniti sunt! Quaerat.&lt;\/p&gt;\r\n        &lt;p&gt;&lt;button class=\"teaser__cta js-buy-button\" data-title=\"Item 01\" data-price=\"20,00 \u20ac\"&gt;Add to cart&lt;\/button&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/li&gt;\r\n    \r\n    &lt;li class=\"teaser\"&gt;\r\n      &lt;div class=\"teaser__wrapper\"&gt;\r\n        &lt;h3 class=\"teaser__headline\"&gt;Item 02&lt;\/h3&gt;\r\n        &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla numquam quidem voluptate deleniti sunt! Quaerat.&lt;\/p&gt;\r\n        &lt;p&gt;&lt;button class=\"teaser__cta js-buy-button\" data-title=\"Item 02\" data-price=\"12,50 \u20ac\"&gt;Add to cart&lt;\/button&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/li&gt;\r\n    \r\n    &lt;li class=\"teaser\"&gt;\r\n      &lt;div class=\"teaser__wrapper\"&gt;\r\n        &lt;h3 class=\"teaser__headline\"&gt;Item 03&lt;\/h3&gt;\r\n        &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla numquam quidem voluptate deleniti sunt! Quaerat.&lt;\/p&gt;\r\n        &lt;p&gt;&lt;button class=\"teaser__cta js-buy-button\" data-title=\"Item 03\" data-price=\"37,90 \u20ac\"&gt;Add to cart&lt;\/button&gt;\r\n      &lt;\/div&gt;\r\n    &lt;\/li&gt;\r\n    \r\n  &lt;\/ul&gt;\r\n&lt;\/main&gt;\r\n<\/pre>\n<p>3. Now, add the following CSS code to your project to style the basic interface of the shopping cart. You can modify the CSS rules according to your needs.<\/p>\n<pre class=\"prettyprint linenums lang-css\">.header {\r\n  background: #26282c;\r\n  color: #fff;\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n}\r\n.header__wrapper {\r\n  padding: 20px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: nowrap;\r\n  justify-content: space-between;\r\n  align-content: stretch;\r\n  align-items: flex-start;\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n}\r\n.header__headline {\r\n  margin: 0;\r\n}\r\n\r\n.cart {\r\n  width: 200px;\r\n  position: relative;\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: nowrap;\r\n  justify-content: space-between;\r\n  align-content: stretch;\r\n  align-items: center;\r\n}\r\n.cart__headline {\r\n  margin: 0;\r\n}\r\n.cart__shoppingList {\r\n  list-style: none;\r\n  padding: 0;\r\n  position: absolute;\r\n  right: -20px;\r\n  top: 40px;\r\n  width: 400px;\r\n  background: #26282c;\r\n}\r\n.cart__shoppingList__item {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: nowrap;\r\n  justify-content: space-between;\r\n  align-content: stretch;\r\n  align-items: flex-start;\r\n  padding: 10px 20px;\r\n}\r\n.cart__shoppingList__item h3, .cart__shoppingList__item p {\r\n  margin: 0;\r\n}\r\n\r\n.main {\r\n  margin-top: 100px;\r\n  background: #26282c;\r\n}\r\n.main__wrapper {\r\n  padding: 20px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: wrap;\r\n  justify-content: space-between;\r\n  align-content: stretch;\r\n  align-items: flex-start;\r\n  max-width: 1280px;\r\n  margin: 0 auto;\r\n}\r\n\r\n.teaser {\r\n  list-style: none;\r\n  padding: 0;\r\n  margin: 0 0 4% 0;\r\n  border: 1px solid #eee;\r\n  box-sizing: border-box;\r\n  order: 0;\r\n  flex: 0 0 48%;\r\n  width: 48%;\r\n  align-self: auto;\r\n  background: #ebebeb;\r\n}\r\n.teaser__wrapper {\r\n  padding: 20px;\r\n}\r\n\r\nbody {\r\n  background: #26282c;\r\n}<\/pre>\n<p>4. The JavaScript functions to manage the cart&#8217;s functionality. These functions handle adding items to the cart, retrieving cart data, deleting items, and displaying the updated cart content. Add the following code between <code>&lt;script&gt;<\/code> tag (or external JS file) just before closing the body tag.<\/p>\n<pre class=\"prettyprint linenums lang-js\">function setCart(item, payload) {\r\n  localStorage.setItem(item, payload);\r\n}\r\n\r\nfunction getCart(item) {\r\n  let cartData = localStorage.getItem(item);\r\n  return cartData;\r\n}\r\n\r\nfunction deleteCart(item) {\r\n  localStorage.removeItem(item);\r\n}\r\n\r\nfunction addToCartHandler() {\r\n  const storageCartName = 'cart';\r\n  let addButton = document.querySelectorAll('.js-buy-button');\r\n\r\n  addButton.forEach(elem =&gt; {\r\n    elem.addEventListener('click', function () {\r\n      let itemTitle = elem.dataset.title;\r\n      let itemPrice = elem.dataset.price;\r\n      let itemPayload = {\r\n        'title': itemTitle,\r\n        'price': itemPrice };\r\n\r\n      let currentCart = JSON.parse(getCart(storageCartName));\r\n      let changeCartEvent = new Event('itemInserted');\r\n\r\n      if (currentCart === null) {\r\n        currentCart = { 'items': [] };\r\n      }\r\n      currentCart.items.push(itemPayload);\r\n      setCart(storageCartName, JSON.stringify(currentCart));\r\n      document.dispatchEvent(changeCartEvent);\r\n    });\r\n  });\r\n};\r\n\r\nfunction listenToCartHandler() {\r\n  let cartData = JSON.parse(getCart('cart'));\r\n  let shoppingListContainer = document.querySelector('#js-item-list');\r\n  shoppingListContainer.innerHTML = '';\r\n\r\n  if (cartData !== null) {\r\n    cartData.items.forEach(elem =&gt; {\r\n      let shoppingListTemplate = `\r\n        &lt;li class=\"cart__shoppingList__item\"&gt;\r\n          &lt;h3&gt;${elem.title}&lt;\/h3&gt;\r\n          &lt;p&gt;Price: ${elem.price}&lt;\/p&gt;\r\n        &lt;\/li&gt;\r\n        `;\r\n      shoppingListContainer.innerHTML += shoppingListTemplate;\r\n    });\r\n  }\r\n}\r\n\r\nfunction emptyCart() {\r\n  let deleteButton = document.querySelector('#js-delete-cart');\r\n  deleteButton.addEventListener('click', function () {\r\n    deleteCart('cart');\r\n    listenToCartHandler();\r\n  });\r\n}\r\n\r\n\/\/ Init\r\nlistenToCartHandler();\r\ndocument.addEventListener(\"itemInserted\", listenToCartHandler, false);\r\naddToCartHandler();\r\nemptyCart();<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully created add-to-cart functionality using JavaScript and local storage. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This code snippet provides functionality to manage a shopping cart using JavaScript and local storage. It allows you to add&#8230;<\/p>\n","protected":false},"author":1,"featured_media":9529,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[],"class_list":["post-9517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JavaScript Add to Cart with Local Storage &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a JavaScript Add to Cart with Local Storage. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript Add to Cart with Local Storage &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a JavaScript Add to Cart with Local Storage. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-09T18:03:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:05:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"JavaScript Add to Cart with Local Storage\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:05:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/\"},\"wordCount\":279,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png\",\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/\",\"name\":\"JavaScript Add to Cart with Local Storage &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png\",\"datePublished\":\"2024-01-09T18:03:00+00:00\",\"dateModified\":\"2024-01-22T11:05:05+00:00\",\"description\":\"Here is a free code snippet to create a JavaScript Add to Cart with Local Storage. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png\",\"width\":1280,\"height\":960,\"caption\":\"JavaScript Add to Cart with Local Storage\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"JavaScript Add to Cart with Local Storage\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JavaScript Add to Cart with Local Storage &#8212; CodeHim","description":"Here is a free code snippet to create a JavaScript Add to Cart with Local Storage. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/","og_locale":"en_US","og_type":"article","og_title":"JavaScript Add to Cart with Local Storage &#8212; CodeHim","og_description":"Here is a free code snippet to create a JavaScript Add to Cart with Local Storage. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-09T18:03:00+00:00","article_modified_time":"2024-01-22T11:05:05+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"JavaScript Add to Cart with Local Storage","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:05:05+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/"},"wordCount":279,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png","articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/","url":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/","name":"JavaScript Add to Cart with Local Storage &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png","datePublished":"2024-01-09T18:03:00+00:00","dateModified":"2024-01-22T11:05:05+00:00","description":"Here is a free code snippet to create a JavaScript Add to Cart with Local Storage. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/JavaScript-Add-to-Cart-with-Local-Storage.png","width":1280,"height":960,"caption":"JavaScript Add to Cart with Local Storage"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/javascript-add-to-cart-with-local-storage\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"JavaScript Add to Cart with Local Storage"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":2061,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=9517"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/9517\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/9529"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=9517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=9517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=9517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}