tengo un trabajo que entregar en unas horas pero no me sale. No se si alguien pueda ayudarme. Lo que tengo que hacer es que al momento de agregar un nuevo elemento y se guarde el texto se suba al localStorage y que al momento de eliminarse se borre ese array de elemento, el problema es que no se como manejar el array con el input text.
Les dejo el codigo para que lo verifiquen.
<html>
<head>
<script>
if (typeof(Storage) !== "undefined")
{
//si hay soporte se agrega la llamada
//localStorage.setItem("nombre","ludwig"); //nombre es igual a ludwig
//localStorage.setItem("clave","230512");
function mostrar()
{
document.getElementById("nombre").innerHTML=localStorage.getItem("nombre");
}
function editar()
{
var nombre = prompt("proporcione el nombre");
localStorage.setItem("nombre",nombre);
}
function eliminar()
{
localStorage.removeItem("nombre");
}
function agregarPersona(id)
{
fila=document.createElement("tr");
col1=document.createElement("td");
col2=document.createElement("td");
inText = document.createElement("INPUT");
inText.setAttribute("name","Nombre[]");
inText.setAttribute("class","input-text");
inText.setAttribute("type","text");
inText.setAttribute("readonly","readonly");
if(id)
{
console.log("no es vacio");
inText.setAttribute("value",id);
}
else
{
console.log("es vacio");
}
col1.append(inText);
btn1=document.createElement("a");
btn2=document.createElement("a");
btn1.setAttribute("href","#");
btn1.setAttribute("class","btn btn-primary");
btn1.setAttribute("onclick","delProducto(this);");
btn1.innerHTML="eliminar |";
btn2.setAttribute("href","#");
btn2.setAttribute("class","btn btn-primary");
btn2.setAttribute("onclick","editProducto(this);");
btn2.innerHTML="editar";
col2.append(btn1);
col2.append(btn2);
fila.appendChild(col1);
fila.appendChild(col2);
document.getElementById("tb").appendChild(fila);
}
function editProducto(obj) //Es el boton de editar
{
var trActual = obj.parentNode.parentNode; // seleccionamos el tr donde se encuentra el boton.
if (obj.innerHTML.toLowerCase()=="editar")
{
trActual.getElementsByClassName("input-text")[0].removeAttribute("readonly");
obj.innerHTML = "guardar";
}
else
{
trActual.getElementsByClassName("input-text")[0].setAttribute("readonly","readonly");
obj.innerHTML = "editar";
trActual.removeAttribute("class");
localStorage.setItem("name", "Nombre[]");
}
}
function delProducto(obj)
{
if (confirm("¿Desea eliminar?")==true)
{
obj.parentNode.parentNode.remove();
localStorage.removeItem("name", "Nombre[]");
return true;
}
else
{
return false;
}
}
function cargarDatos()
{
JsonText = localStorage.getItem("myLocalStorage");
myLocalStorage = JSON.parse(JsonText);
for (var i in myLocalStorage.personas.persona)
{
agregarPersona(myLocalStorage.personas.persona[i].nombre);
}
}
//datos de ejemplo
myLocalStorage = {"personas":{"persona":[{"nombre": "Daniel Lopez Cortazar"}]}};
myLocalStorage = JSON.stringify(myLocalStorage);
localStorage.setItem("myLocalStorage", myLocalStorage);
}
else
{
//debemos decir que no tiene soporte
document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>
</head>
<body>
<div class="container-fluid">
<h1 id="nombre"></h1>
<a href="#" onclick="mostrar()">Muestra datos</a>
<a href="#" onclick="editar()">Edita datos</a>
<a href="#" onclick="eliminar()">Eliminar datos</a>
<h2>Lista de personas</h2>
<a class="btn btn-primary" onclick="agregarPersona();">Agregar</a>
<table class="table" id="tb">
<tr>
<th>Nombre</th>
<th>Operacion</th>
</tr>
</table>
<a href="javascript:;" onclick="cargarDatos();">Cargar datos</a>
</div>
</body>
</html>