Creative Problem3: Develop An Application For Implementing A Shopping Cart For Achieving Web Services of Intelligent Shopping

Creative Problem3:
Develop an application for

implementing a shopping cart for achieving web
services of Intelligent Shopping.
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’ll
go over some jQuery code, as an alternative to JavaScript code,
for those interested in using jQuery.
<!doctype html>
<html lang="en-US">
<head>
<title>HTML5 Local Storage Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">
<meta name="rating" content="General">
<meta name="expires" content="never">
<meta name="language" content="English, EN">
<meta name="description" content="Shopping cart project">
<script src="Storage.js"></script>
<link rel="stylesheet" href="StorageStyle.css">
</head>
<form name="ShoppingList">
<fieldset>
<legend>Shopping cart</legend>
<label>Item: <input type="text" name="name"></label>
<label>Quantity: <input type="text" name="data"></label>
<input type="button" value="Save" onclick="SaveItem()">

<input type="button" value="Update" onclick="ModifyItem()">
<input type="button" value="Delete" onclick="RemoveItem()">
</fieldset>
<div id="items_table">
<h2>Shopping List</h2>
<table id="list"></table>
<label><input type="button" value="Clear" onclick="ClearAll()">
* Delete all items</label>
</div>
</form>
function doShowAll() {
if (CheckBrowser()) {
var key = "";
var list = "<tr><th>Item</th><th>Value</th></tr>\n";
var i = 0;
//For a more advanced feature, you can set a cap on max items in the cart.
for (i = 0; i <= localStorage.length-1; i++) {
key = localStorage.key(i);
list += "<tr><td>" + key + "</td>\n<td>"
+ localStorage.getItem(key) + "</td></tr>\n";
}
//If no item exists in the cart.
if (list == "<tr><th>Item</th><th>Value</th></tr>\n") {
list += "<tr><td><i>empty</i></td>\n<td><i>empty</i></td></tr>\n";
}
//Bind the data to HTML table.
//You can use jQuery, too.
document.getElementById('list').innerHTML = list;
} else {
alert('Cannot save shopping list as your browser does not support HTML 5');
}
}
Run And Test The Shopping Cart
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’ll show you how the data are
inserted into the HTML5 storage engine. That is, we’ll
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.
Summary
To build a shopping cart step by step using HTML5 web

storage and JavaScript. We’ve seen how to use jQuery as
an alternative to JavaScript. We’ve also discussed JSON
functions like stringify and parse to handle arrays and
objects in a shopping cart. this tutorial by adding more
features, like adding product categories and subcategories
while storing data in a JavaScript multi-dimensional
array. Moreover, we can replace the whole JavaScript
code with jQuery.
We’ve 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.
To conclude, here are a few issues to consider when
implementing HTML5 web storage:
 Some users might have privacy settings that prevent
the browser from storing data.
 Some users might use their browser in incognito
mode.
 Be aware of a few security issues, like DNS spoofing
attacks, cross-directory attacks, and sensitive data
compromise.

Creative Problem3: Develop An Application For Implementing A Shopping Cart For Achieving Web Services of Intelligent Shopping

Uploaded by

Creative Problem3: Develop An Application For Implementing A Shopping Cart For Achieving Web Services of Intelligent Shopping

Uploaded by

Creative Problem3:

Develop an application for

To build our shopping cart, we first create an HTML page with a

<input type="button" value="Save" onclick="SaveItem()">

Run And Test The Shopping Cart

In the previous two sections, we added code to the HTML

To build a shopping cart step by step using HTML5 web

You might also like