Scribd
Upload
28 views

Cart Coding HTML

This document describes a shopping cart project that uses HTML5 local storage to save items in the cart. It includes code to check browser support, save items to local storage, retrieve and display saved items, update existing items, and remove items from local storage. Functions are provided to save, modify, and remove items, as well as to load and display all items from local storage on page load.

Uploaded by

datmbatha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
28 views

Cart Coding HTML

This document describes a shopping cart project that uses HTML5 local storage to save items in the cart. It includes code to check browser support, save items to local storage, retrieve and display saved items, update existing items, and remove items from local storage. Functions are provided to save, modify, and remove items, as well as to load and display all items from local storage on page load.

Uploaded by

datmbatha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

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 with HTML5 and JavaScript">

<meta name="keywords" content="HTML5,CSS,JavaScript, html5 session storage, html5 local storage">

<meta name="author" content="dcwebmakers.com">

<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>

<body onload="doShowAll()">

window.load=doShowAll();

$( window ).load(function() {

doShowAll();

});

/*

=====> Checking browser support.

//This step might not be required because most modern browsers do support HTML5.

*/

//Function below might be redundant.

function CheckBrowser() {

if ('localStorage' in window && window['localStorage'] !== null) {

// We can use localStorage object to store data.

return true;

} else {

return false;

// Dynamically populate the table with shopping list items.

//Step below can be done via PHP and AJAX, too.


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 testing the Cart

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

<input type="button" value="Update" onclick="ModifyItem()">

<input type="button" value="Delete" onclick="RemoveItem()">


localStorage.myProperty="myValue";

delete localStorage.myProperty;

localStorage.setItem('propertyName','value');

localStorage.getItem('propertyName');

localStorage.removeItem('propertyName');

function SaveItem() {

var name = document.forms.ShoppingList.name.value;

var data = document.forms.ShoppingList.data.value;

localStorage.setItem(name, data);

doShowAll();

<label>Item: <input type="text" name="name" id="name"></label>

<label>Quantity: <input type="text" name="data" id="data"></label>


function SaveItem() {

var name = $("#name").val();

var data = $("#data").val();

localStorage.setItem(name, data);

doShowAll();

//Change an existing key-value in HTML5 storage.

function ModifyItem() {

var name1 = document.forms.ShoppingList.name.value;

var data1 = document.forms.ShoppingList.data.value;

//check if name1 is already exists

//Check if key exists.

if (localStorage.getItem(name1) !=null)

//update

localStorage.setItem(name1,data1);

document.forms.ShoppingList.data.value = localStorage.getItem(name1);

doShowAll();

function ModifyItem() {
var name1 = $("#name").val();

var data1 = $("#data").val();

//Check if name already exists.

//Check if key exists.

if (localStorage.getItem(name1) !=null)

//update

localStorage.setItem(name1,data1);

var new_info=localStorage.getItem(name1);

$("#data").val(new_info);

doShowAll();

function RemoveItem()

var name=document.forms.ShoppingList.name.value;

document.forms.ShoppingList.data.value=localStorage.removeItem(name);

doShowAll();

You might also like