{"id":69793,"date":"2019-08-28T04:19:33","date_gmt":"2019-08-28T11:19:33","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/"},"modified":"2019-08-28T04:19:33","modified_gmt":"2019-08-28T11:19:33","slug":"creating-a-shopping-cart-with-html5-web-storage","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/","title":{"rendered":"Creating A Shopping Cart With HTML5 Web Storage"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/08\/shopping-cart-html5-web-storage\/\"><title>Creating A Shopping Cart With HTML5 Web Storage<\/title><\/p>\n<article>\n<header>\n<h1>Creating A Shopping Cart With HTML5 Web Storage<\/h1>\n<address>Matt Zand<\/address>\n<p>                  <time datetime=\"2019-08-26T14:30:59+02:00\">2019-08-26T14:30:59+02:00<\/time><time datetime=\"2019-08-28T10:35:32+00:00\">2019-08-28T10:35:32+00:00<\/time><\/header>\n<p>With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing page load time and site performance. In particular, HTML5 web storage was a game changer as they allow users\u2019 browsers to store user data without using a server. So the creation of web storage, allowed front-end developers to accomplish more on their website without knowing or using server-side coding or database.<\/p>\n<p>Online e-commerce websites predominantly use server-side languages such as PHP to store users\u2019 data and pass them from one page to another. Using JavaScript back-end frameworks such as Node.js, we can achieve the same goal. However, in this tutorial, we\u2019ll show you step by step how to build a shopping cart with HTML5 and some minor JavaScript code. Other uses of the techniques in this tutorial would be to store user preferences, the user\u2019s favorite content, wish lists, and user settings like name and password on websites and native mobile apps without using a database.<\/p>\n<p>Many high-traffic websites rely on complex techniques such as server clustering, DNS load balancers, client-side and server-side caching, distributed databases, and microservices to optimize performance and availability. Indeed, the major challenge for dynamic websites is to fetch data from a database and use a server-side language such as PHP to process them. However, remote database storage should be used only for essential website content, such as articles and user credentials. Features such as user preferences can be stored in the user\u2019s browser, similar to cookies. Likewise, when you build a native mobile app, you can use HTML5 web storage in conjunction with a local database to increase the speed of your app. Thus, as front-end developers, we need to explore ways in which we can exploit the power of HTML5 web storage in our applications in the early stages of development.<\/p>\n<p>I have been a part of a team developing a large-scale social website, and we used HTML5 web storage heavily. For instance, when a user logs in, we store the hashed user ID in an HTML5 session and use it to authenticate the user on protected pages. We also use this feature to store all new push notifications \u2014 such as new chat messages, website messages, and new feeds \u2014 and pass them from one page to another. When a social website gets high traffic, total reliance on the server for load balancing might not work, so you have to identify tasks and data that can be handled by the user\u2019s browser instead of your servers.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>Project Background<\/h3>\n<p>A shopping cart allows a website\u2019s visitor to view product pages and add items to their basket. The visitor can review all of their items and update their basket (such as to add or remove items). To achieve this, the website needs to store the visitor\u2019s data and pass them from one page to another, until the visitor goes to the checkout page and makes a purchase. Storing data can be done via a server-side language or a client-side one. With a server-side language, the server bears the weight of the data storage, whereas with a client-side language, the visitor\u2019s computer (desktop, tablet or smartphone) stores and processes the data.  Each approach has its pros and cons. In this tutorial, we\u2019ll focus on a simple client-side approach, based on HTML5 and JavaScript.<\/p>\n<p><strong>Note<\/strong>: <em>In order to be able to follow this tutorial, basic knowledge of HTML5, CSS and JavaScript is required.<\/em><\/p>\n<h4>Project Files<\/h4>\n<p>Click <a href=\"http:\/\/provide.smashingmagazine.com\/html5-js-shopping-cart-source-files.zip\">here<\/a> to download the project\u2019s source files. You can see a <a href=\"https:\/\/blockchain.dcwebmakers.com\/demo\/html5-js-shopping-cart\/index.html\">live demo<\/a>, too.<\/p>\n<h3>Overview Of HTML5 Web Storage<\/h3>\n<p>HTML5 web storage allows web applications to store values locally in the browser that can survive the browser session, just like cookies. Unlike cookies that need to be sent with every HTTP request, web storage data is never transferred to the server; thus, web storage outperforms cookies in web performance. Furthermore, cookies allow you to store only 4 KB of data per domain, whereas web storage allows at least 5 MB per domain. Web storage works like a simple array, mapping keys to values, and they have two types:<\/p>\n<ul>\n<li><strong>Session storage<\/strong><br \/>\nThis stores data in one browser session, where it becomes available until the browser or browser tab is closed. Popup windows opened from the same window can see session storage, and so can iframes inside the same window. However, multiple windows from the same origin (URL) cannot see each other\u2019s session storage.<\/li>\n<li><strong>Local storage<\/strong><br \/>\nThis stores data in the web browser with no expiration date. The data is available to all windows with the same origin (domain), even when the browser or browser tabs are reopened or closed.<\/li>\n<\/ul>\n<p>Both storage types are currently supported in all major web browsers. Keep in mind that you cannot pass storage data from one browser to another, even if both browsers are visiting the same domain.<\/p>\n<h3>Build A Basic Shopping Cart<\/h3>\n<p>To build our shopping cart, we first create an HTML page with a simple cart to show items, and a simple form to add or edit the basket. Then, we add HTML web storage to it, followed by JavaScript coding. Although we are using HTML5 local storage tags, all steps are identical to those of HTML5 session storage and can be applied to HTML5 session storage tags. Lastly, we\u2019ll go over some jQuery code, as an alternative to JavaScript code, for those interested in using jQuery.<\/p>\n<h3>Add HTML5 Local Storage To Shopping Cart<\/h3>\n<p>Our HTML page is a basic page, with tags for external JavaScript and CSS referenced in the head.<\/p>\n<div>\n<pre><code><!doctype html>\n<html lang=\"en-US\">\n<head>\n<title>HTML5 Local Storage Project<\/title>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, shrink-to-fit=no\">\n<meta name=\"rating\" content=\"General\" \/>\n<meta name=\"expires\" content=\"never\" \/>\n<meta name=\"language\" content=\"English, EN\" \/>\n<meta name=\"description\" content=\"shopping cart project with HTML5 and JavaScript\">\n<meta name=\"keywords\" content=\"HTML5,CSS,JavaScript, html5 session storage, html5 local storage\">\n<meta name=\"author\" content=\"dcwebmakers.com\">\n<script src=\"Storage.js\"><\/script>\n<link rel=\"stylesheet\" href=\"StorageStyle.css\">\n<\/head>\n<\/code><\/pre>\n<\/div>\n<p>Below is the HTML content for the page\u2019s body:<\/p>\n<div>\n<pre><code><form name=\"ShoppingList\">\n  <div id=\"main\">\n        <table>\n            <tr>\n                <td><label>Item: <input type=\"text\" name=\"name\"><\/label><\/td>\n                <td><label>Quantity: <input type=\"text\" name=\"data\"><\/label><\/td>\n            <\/tr>\n            <tr>\n                <td>\n                    <input type=\"button\" value=\"Save\"   onclick=\"SaveItem()\">\n                    <input type=\"button\" value=\"Update\" onclick=\"ModifyItem()\">\n                    <input type=\"button\" value=\"Delete\" onclick=\"RemoveItem()\">\n                <\/td>\n            <\/tr>\n        <\/table>\n    <\/div>\n    <div id=\"items_table\">\n        <h3>Shopping List<\/h3>\n            <table id=\"list\"><\/table>\n            <p>\n                <label><input type=\"button\" value=\"Clear\" onclick=\"ClearAll()\">\n                * Delete all items<\/label>\n            <\/p>\n    <\/div>\n<\/form>\n<\/code><\/pre>\n<\/div>\n<h3>Adding JavaScript To The Shopping Cart<\/h3>\n<p>We\u2019ll create and call the JavaScript function <code>doShowAll()<\/code> in the <code>onload()<\/code> event to check for browser support and to dynamically create the table that shows the storage name-value pair.<\/p>\n<pre><code><body onload=\"doShowAll()\">\n<\/code><\/pre>\n<p>Alternatively, you can use the JavaScript onload event by adding this to the JavaScript code:<\/p>\n<pre><code>window.load=doShowAll();\n<\/code><\/pre>\n<p>Or use this for jQuery:<\/p>\n<pre><code>$( window ).load(function() {\n  doShowAll();\n});\n<\/code><\/pre>\n<p>In the <code>CheckBrowser()<\/code> function, we would like to check whether the browser supports HTML5 storage. Note that this step might not be required because most modern web browsers support it.<\/p>\n<div>\n<pre><code>\/*\n=====> Checking browser support.\n \/\/This step might not be required because most modern browsers do support HTML5.\n *\/\n \/\/Function below might be redundant.\nfunction CheckBrowser() {\n    if ('localStorage' in window && window['localStorage'] !== null) {\n        \/\/ We can use localStorage object to store data.\n        return true;\n    } else {\n            return false;\n    }\n}\n<\/code><\/pre>\n<\/div>\n<p>Inside the <code>doShowAll()<\/code>, if the <code>CheckBrowser()<\/code> function evaluates first for browser support, then it will dynamically create the table for the shopping list during page load. You can iterate the keys (property names) of the key-value pairs stored in local storage inside a JavaScript loop, as shown below. Based on the storage value, this method populates the table dynamically to show the key-value pair stored in local storage.<\/p>\n<div>\n<pre><code>\/\/ Dynamically populate the table with shopping list items.\n\/\/Step below can be done via PHP and AJAX, too.\nfunction doShowAll() {\n    if (CheckBrowser()) {\n        var key = \"\";\n        var list = \"<tr><th>Item<\/th><th>Value<\/th><\/tr>n\";\n        var i = 0;\n        \/\/For a more advanced feature, you can set a cap on max items in the cart.\n        for (i = 0; i <= localStorage.length-1; i++) {\n            key = localStorage.key(i);\n            list += \"<tr><td>\" + key + \"<\/td>n<td>\"\n                    + localStorage.getItem(key) + \"<\/td><\/tr>n\";\n        }\n        \/\/If no item exists in the cart.\n        if (list == \"<tr><th>Item<\/th><th>Value<\/th><\/tr>n\") {\n            list += \"<tr><td><i>empty<\/i><\/td>n<td><i>empty<\/i><\/td><\/tr>n\";\n        }\n        \/\/Bind the data to HTML table.\n        \/\/You can use jQuery, too.\n        document.getElementById('list').innerHTML = list;\n    } else {\n        alert('Cannot save shopping list as your browser does not support HTML 5');\n    }\n}\n<\/code><\/pre>\n<\/div>\n<p><strong>Note<\/strong>: <em>Either you or your framework will have a preferred method of creating new DOM nodes and handling events. To keep things clear and focused, our example uses<\/em> <code>.innerHTML<\/code> and inline event handlers <em>even though we\u2019d normally avoid that in production code.<\/em><\/p>\n<p><strong>Tip:<\/strong> <em>If you\u2019d like to use jQuery to bind data, you can just replace<\/em> <code>document.getElementById('list').innerHTML = list;<\/code> <em>with<\/em> <code>$(\u2018#list\u2019).html()=list;<\/code>.<\/p>\n<div><\/div>\n<h3>Run And Test The Shopping Cart<\/h3>\n<p>In the previous two sections, we added code to the HTML head, and we added HTML to the shopping cart form and basket. We also created a JavaScript function to check for browser support and to populate the basket with the items in the cart. In populating the basket items, the JavaScript fetches values from HTML web storage, instead of a database. In this part, we\u2019ll show you how the data are inserted into the HTML5 storage engine. That is, we\u2019ll use HTML5 local storage in conjunction with JavaScript to insert new items to the shopping cart, as well as edit an existing item in the cart.<\/p>\n<p><strong>Note<\/strong>: <em>I\u2019ve added tips sections below to show jQuery code, as an alternative to the JavaScript ones.<\/em><\/p>\n<p>We\u2019ll create a separate HTML <code>div<\/code> element to capture user input and submission. We\u2019ll attach the corresponding JavaScript function in the <code>onClick<\/code> event for the buttons.<\/p>\n<div>\n<pre><code><input type=\"button\" value=\"Save\"   onclick=\"SaveItem()\">\n<input type=\"button\" value=\"Update\" onclick=\"ModifyItem()\">\n<input type=\"button\" value=\"Delete\" onclick=\"RemoveItem()\">\n<\/code><\/pre>\n<\/div>\n<p>You can set properties on the <code>localStorage<\/code> object similar to a normal JavaScript object. Here is an example of how we can set the local storage property <code>myProperty<\/code> to the value <code>myValue<\/code>:<\/p>\n<pre><code>localStorage.myProperty=\"myValue\";\n<\/code><\/pre>\n<p>You can delete local storage property like this:<\/p>\n<pre><code>delete localStorage.myProperty;\n<\/code><\/pre>\n<p>Alternately, you can use the following methods to access local storage:<\/p>\n<pre><code>localStorage.setItem('propertyName','value');\nlocalStorage.getItem('propertyName');\nlocalStorage.removeItem('propertyName');\n<\/code><\/pre>\n<p>To save the key-value pair, get the value of the corresponding JavaScript object and call the <code>setItem<\/code>  method:<\/p>\n<pre><code>function SaveItem() {\n\n    var name = document.forms.ShoppingList.name.value;\n    var data = document.forms.ShoppingList.data.value;\n    localStorage.setItem(name, data);\n    doShowAll();\n\n}\n<\/code><\/pre>\n<p>Below is the jQuery alternative for the <code>SaveItem<\/code> function. First, add an ID to the form inputs:<\/p>\n<pre><code><td><label>Item: <input type=\"text\" name=\"name\" id=\"name\"><\/label><\/td>\n<td><label>Quantity: <input type=\"text\" name=\"data\" id=\"data\"><\/label><\/td>\n<\/code><\/pre>\n<p>Then, select the form inputs by ID, and get their values. As you can see below, it is much simpler than JavaScript:<\/p>\n<pre><code>function SaveItem() {\n    var name = $(\"#name\").val();\n    var data = $(\"#data\").val();\n    localStorage.setItem(name, data);\n    doShowAll();\n}\n<\/code><\/pre>\n<p>To update an item in the shopping cart, you have to first check whether that item\u2019s key already exists in local storage, and then update its value, as shown below:<\/p>\n<div>\n<pre><code>\/\/Change an existing key-value in HTML5 storage.\nfunction ModifyItem() {\n    var name1 = document.forms.ShoppingList.name.value;\n    var data1 = document.forms.ShoppingList.data.value;\n    \/\/check if name1 is already exists\n\n\/\/Check if key exists.\n            if (localStorage.getItem(name1) !=null)\n            {\n              \/\/update\n              localStorage.setItem(name1,data1);\n              document.forms.ShoppingList.data.value = localStorage.getItem(name1);\n            }\n\n\n    doShowAll();\n}\n<\/code><\/pre>\n<\/div>\n<p>Below shows the jQuery alternative.<\/p>\n<div>\n<pre><code>function ModifyItem() {\n    var name1 = $(\"#name\").val();\n    var data1 = $(\"#data\").val();\n    \/\/Check if name already exists.\n\/\/Check if key exists.\n         if (localStorage.getItem(name1) !=null)\n         {\n           \/\/update\n           localStorage.setItem(name1,data1);\n           var new_info=localStorage.getItem(name1);\n           $(\"#data\").val(new_info);\n         }\n\n    doShowAll();\n}\n<\/code><\/pre>\n<\/div>\n<p>We will use the <code>removeItem<\/code> method to delete an item from storage.<\/p>\n<div>\n<pre><code>function RemoveItem()\n{\nvar name=document.forms.ShoppingList.name.value;\ndocument.forms.ShoppingList.data.value=localStorage.removeItem(name);\ndoShowAll();\n}\n<\/code><\/pre>\n<\/div>\n<p><strong>Tip:<\/strong> <em>Similar to the previous two functions, you can use jQuery selectors in the<\/em> <code>RemoveItem<\/code> <em>function.<\/em><\/p>\n<p>There is another method for local storage that allows you to clear the entire local storage. We call the <code>ClearAll()<\/code> function in the <code>onClick<\/code> event of the \u201cClear\u201d button:<\/p>\n<pre><code><input type=\"button\" value=\"Clear\" onclick=\"ClearAll()\">\n<\/code><\/pre>\n<p>We use the <code>clear<\/code> method to clear the local storage, as shown below:<\/p>\n<pre><code>function ClearAll() {\n    localStorage.clear();\n    doShowAll();\n}\n<\/code><\/pre>\n<h3>Session Storage<\/h3>\n<p>The <code>sessionStorage<\/code> object works in the same way as <code>localStorage<\/code>. You can replace the above example with the <code>sessionStorage<\/code> object to expire the data after one session. Once the user closes the browser window, the storage will be cleared. In short, the APIs for <code>localStorage<\/code> and <code>sessionStorage<\/code> are identical, allowing you to use the following methods:<\/p>\n<ul>\n<li><code>setItem(key, value)<\/code><\/li>\n<li><code>getItem(key)<\/code><\/li>\n<li><code>removeItem(key)<\/code><\/li>\n<li><code>clear()<\/code><\/li>\n<li><code>key(index)<\/code><\/li>\n<li><code>length<\/code><\/li>\n<\/ul>\n<div><\/div>\n<h3>Shopping Carts With Arrays And Objects<\/h3>\n<p>Because HTML5 web storage only supports single name-value storage, you have to use JSON or another method to convert your arrays or objects into a single string. You might need an array or object if you have a category and subcategories of items, or if you have a shopping cart with multiple data, like customer info, item info, etc. You just need to implode your array or object items into a string to store them in web storage, and then explode (or split) them back to an array to show them on another page. Let\u2019s go through a basic example of a shopping cart that has three sets of info: customer info, item info and custom mailing address. First, we use JSON.stringify to convert the object into a string. Then, we use JSON.parse to reverse it back.<\/p>\n<p><strong>Hint<\/strong>: <em>Keep in mind that the key-name should be unique for each domain.<\/em><\/p>\n<div>\n<pre><code>\/\/Customer info\n\/\/You can use array in addition to object.\nvar obj1 = { firstname: \"John\", lastname: \"thomson\" };\nvar cust = JSON.stringify(obj1);\n\n\/\/Mailing info\nvar obj2 = { state: \"VA\", city: \"Arlington\" };\nvar mail = JSON.stringify(obj2);\n\n\/\/Item info\nvar obj3 = { item: \"milk\", quantity: 2 };\nvar basket = JSON.stringify(obj3);\n\n\/\/Next, push three strings into key-value of HTML5 storage.\n\n\/\/Use JSON parse function below to convert string back into object or array.\nvar New_cust=JSON.parse(cust);\n<\/code><\/pre>\n<\/div>\n<h3>Summary<\/h3>\n<p>In this tutorial, we have learned how to build a shopping cart step by step using HTML5 web storage and JavaScript. We\u2019ve seen how to use jQuery as an alternative to JavaScript. We\u2019ve also discussed JSON functions like stringify and parse to handle arrays and objects in a shopping cart. You can build on this tutorial by adding more features, like adding product categories and subcategories while storing data in a JavaScript multi-dimensional array. Moreover, you can replace the whole JavaScript code with jQuery.<\/p>\n<p>We\u2019ve seen what other things developers can accomplish with HTML5 web storage and what other features they can add to their websites. For example, you can use this tutorial to store user preferences, favorited content, wish lists, and user settings like names and passwords on websites and native mobile apps, without using a database.<\/p>\n<p>To conclude, here are a few issues to consider when implementing HTML5 web storage:<\/p>\n<ul>\n<li>Some users might have privacy settings that prevent the browser from storing data.<\/li>\n<li>Some users might use their browser in incognito mode.<\/li>\n<li>Be aware of a few security issues, like DNS spoofing attacks, cross-directory attacks, and sensitive data compromise.<\/li>\n<\/ul>\n<h4>Related Reading<\/h4>\n<ul>\n<li>\u201c<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/IndexedDB_API\/Browser_storage_limits_and_eviction_criteria\">Browser Storage Limits And Eviction Criteria<\/a>,\u201d MDN web docs, Mozilla<\/li>\n<li>\u201c<a href=\"https:\/\/html.spec.whatwg.org\/multipage\/webstorage.html\">Web Storage<\/a>,\u201d HTML Living Standard,<\/li>\n<li>\u201c<a href=\"https:\/\/blog.whatwg.org\/this-week-in-html-5-episode-30\">This Week In HTML 5<\/a>,\u201d The WHATWG Blog<\/li>\n<\/ul>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/08\/logo-red-19.png?w=900\" alt=\"Smashing Editorial\"><span>(dm, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Creating A Shopping Cart With HTML5 Web Storage Creating A Shopping Cart With HTML5 Web Storage Matt Zand 2019-08-26T14:30:59+02:002019-08-28T10:35:32+00:00 With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":69794,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-69793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Creating A Shopping Cart With HTML5 Web StorageCreating A Shopping Cart With HTML5 Web Storage Matt Zand 2019-08-26T14:30:59+02:002019-08-28T10:35:32+00:00With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Creating A Shopping Cart With HTML5 Web Storage | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Creating A Shopping Cart With HTML5 Web StorageCreating A Shopping Cart With HTML5 Web Storage Matt Zand 2019-08-26T14:30:59+02:002019-08-28T10:35:32+00:00With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-08-28T11:19:33+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-08-28T11:19:33+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Creating A Shopping Cart With HTML5 Web Storage | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Creating A Shopping Cart With HTML5 Web StorageCreating A Shopping Cart With HTML5 Web Storage Matt Zand 2019-08-26T14:30:59+02:002019-08-28T10:35:32+00:00With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#article\",\"name\":\"Creating A Shopping Cart With HTML5 Web Storage | Design for Immersive Technologies\",\"headline\":\"Creating A Shopping Cart With HTML5 Web Storage\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/logo-red-19.png?fit=60%2C80&ssl=1\",\"width\":60,\"height\":80},\"datePublished\":\"2019-08-28T04:19:33-07:00\",\"dateModified\":\"2019-08-28T04:19:33-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#listItem\",\"name\":\"Creating A Shopping Cart With HTML5 Web Storage\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#listItem\",\"position\":3,\"name\":\"Creating A Shopping Cart With HTML5 Web Storage\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/\",\"name\":\"Creating A Shopping Cart With HTML5 Web Storage | Design for Immersive Technologies\",\"description\":\"Creating A Shopping Cart With HTML5 Web StorageCreating A Shopping Cart With HTML5 Web Storage Matt Zand 2019-08-26T14:30:59+02:002019-08-28T10:35:32+00:00With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/logo-red-19.png?fit=60%2C80&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#mainImage\",\"width\":60,\"height\":80},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/08\\\/creating-a-shopping-cart-with-html5-web-storage\\\/#mainImage\"},\"datePublished\":\"2019-08-28T04:19:33-07:00\",\"dateModified\":\"2019-08-28T04:19:33-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Creating A Shopping Cart With HTML5 Web Storage | Design for Immersive Technologies","description":"Creating A Shopping Cart With HTML5 Web StorageCreating A Shopping Cart With HTML5 Web Storage Matt Zand 2019-08-26T14:30:59+02:002019-08-28T10:35:32+00:00With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#article","name":"Creating A Shopping Cart With HTML5 Web Storage | Design for Immersive Technologies","headline":"Creating A Shopping Cart With HTML5 Web Storage","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/08\/logo-red-19.png?fit=60%2C80&ssl=1","width":60,"height":80},"datePublished":"2019-08-28T04:19:33-07:00","dateModified":"2019-08-28T04:19:33-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#listItem","name":"Creating A Shopping Cart With HTML5 Web Storage"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#listItem","position":3,"name":"Creating A Shopping Cart With HTML5 Web Storage","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/","name":"Creating A Shopping Cart With HTML5 Web Storage | Design for Immersive Technologies","description":"Creating A Shopping Cart With HTML5 Web StorageCreating A Shopping Cart With HTML5 Web Storage Matt Zand 2019-08-26T14:30:59+02:002019-08-28T10:35:32+00:00With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/08\/logo-red-19.png?fit=60%2C80&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#mainImage","width":60,"height":80},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/#mainImage"},"datePublished":"2019-08-28T04:19:33-07:00","dateModified":"2019-08-28T04:19:33-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Creating A Shopping Cart With HTML5 Web Storage | Design for Immersive Technologies","og:description":"Creating A Shopping Cart With HTML5 Web StorageCreating A Shopping Cart With HTML5 Web Storage Matt Zand 2019-08-26T14:30:59+02:002019-08-28T10:35:32+00:00With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/","article:published_time":"2019-08-28T11:19:33+00:00","article:modified_time":"2019-08-28T11:19:33+00:00","twitter:card":"summary","twitter:title":"Creating A Shopping Cart With HTML5 Web Storage | Design for Immersive Technologies","twitter:description":"Creating A Shopping Cart With HTML5 Web StorageCreating A Shopping Cart With HTML5 Web Storage Matt Zand 2019-08-26T14:30:59+02:002019-08-28T10:35:32+00:00With the advent of HTML5, many sites were able to replace JavaScript plugin and codes with simple more efficient HTML codes such as audio, video, geolocation, etc. HTML5 tags made the job of developers much easier while enhancing"},"aioseo_meta_data":{"post_id":"69793","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 18:10:55","updated":"2026-09-01 22:40:07","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tCreating A Shopping Cart With HTML5 Web Storage\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Creating A Shopping Cart With HTML5 Web Storage","link":"https:\/\/www.taterboy.com\/blog\/2019\/08\/creating-a-shopping-cart-with-html5-web-storage\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-i9H","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/08\/logo-red-19.png?fit=60%2C80&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/69793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=69793"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/69793\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/69794"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=69793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=69793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=69793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}