Untitled

<!DOCTYPE html>
<html>

<head>
	<META="UTF-8">

		<link rel="stylesheet" type="text/css" href="jquery.mobile/jquery.mobile-1.4.5.min.css">
		<SCRIPT TYPE="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></SCRIPT>
		<SCRIPT TYPE="text/javascript" src="jquery.mobile/jquery.mobile-1.4.5.min.js"></SCRIPT>

</head>

<body>
	<div data-role="page" id="pagina1" data-theme="a">
		<div data-role="header">
			<h4>localstore_carga</h4>
			<div data-role="navbar">
				<ul>
					<li><a href="#pagina1">cargar</a></li>
					<li><a href="#pagina2">lee</a></li>
					<li><a href="#pagina3">borra</a></li>
				</ul>
			</div>

		</div>
		<div data-role="content">
			<h4>carga producto</h4>
			<form id="form1" name="form1">
				<input type="text" name="producto" placeholder="ingrese producto" id="producto">
				<input type="text" name="precio" id="precio" placeholder="ingrese precio">
				<input type="button" value="cargar" onclick="cargar()">
			</form>
			<h4 id="resultado_carga"></h4>

		</div>
		<div data-role="footer" data-position="fixed">
			<h4>pie</h4>
		</div>
	</div>
	<div data-role="page" id="pagina2" data-theme="a">
		<div data-role="header">
			<h4>localstore_lee</h4>
			<div data-role="navbar">
				<ul>
					<li><a href="#pagina1">cargar</a></li>
					<li><a href="#pagina2">lee</a></li>
					<li><a href="#pagina3">borra</a></li>
				</ul>
			</div>

		</div>
		<div data-role="content">
			<h4>busca precio</h4>
			<form name="form2" id="form2">
				<input type="text" name="buscar" id="buscar">
				<input type="button" value="busca" onclick="lee()">
			</form>
			<h3 id="resultado1"></h3>
			<h3 id="resultado4"></h3>
		</div>
		<div data-role="footer" data-position="fixed">
			<h4>pie</h4>
		</div>
	</div>
	<div data-role="page" id="pagina3" data-theme="a">
		<div data-role="header">
			<h4>localstore_borra</h4>
			<div data-role="navbar">
				<ul>
					<li><a href="#pagina1">cargar</a></li>
					<li><a href="#pagina2">lee</a></li>
					<li><a href="#pagina3">borra</a></li>
				</ul>
			</div>

		</div>
		<div data-role="content">
			<h4>borra producto</h4>
			<form id="form3" name="form3">
				<input type="text" placeholder="borrar producto" id="borra_prod" name="borra_prod">
				<input type="button" value="borra" onclick="borra()">
			</form>
			<BUTTON onclick="borra_todo()">borra todo</BUTTON>
			<h4 id="resultado5"></h4>
		</div>
		<div data-role="footer" data-position="fixed">
			<h4>pie</h4>
		</div>
	</div>

</body>
<SCRIPT TYPE="text/javascript">
function cargar()
{
var producto = document.form1.producto.value;
var precio = document.form1.precio.value;
window.localStorage.setItem(producto,precio);
$('#resultado_carga').html("se cargo correctamente");
}

function lee()
{
var busca_prd = document.form2.buscar.value;
var resultado3 = window.localStorage.getItem(busca_prd);
$('#resultado1').html("producto:" + busca_prd + "</br>precio:" + resultado3 );
//var a = window.localStorage.key(1);
//var d = window.localStorage.length;
//$('#resultado4').html(a);
}

function borra()
{
 var borra1 = document.form3.borra_prod.value;
 window.localStorage.removeItem(borra1);
 $('#resultado5').html("el producto:"+borra1+"se borro exitosamente");


}
function borra_todo()
{
	window.localStorage.clear();

}
</SCRIPT>
</html>