0

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>

introducir la descripción de la imagen aquí

1
  • Mira si esta respuesta puede aportar algo en tu caso. Saludos.
    – A. Cedano
    Commented el 25 abr. 2018 a las 16:30

1 respuesta 1

1

No sé si te entendí bien, pero si lo que necesitas es eliminar un elemento de un arreglo lo que debes hacer es obtener el indice del elemento en el arreglo y después utilizar la función splice para "eliminarlo" de este para finalmente volver a guardar el arreglo, sería algo así.

var nombres, ['camilo', 'andres', 'felipe'],
    indice = nombres.indexOf('andres');
if(indice > -1){
  nombres.splice(index, 1);//[
  //Aquí se debe guardar el arreglo nuevamente en el localStorage.
}

Te recomiendo que modifiques los objetos que estás guardando, y les pongas un índice, algo así:

var personas = [{id: 1, nombre: 'Camilo'}, {id: 2, nombre: 'Andrés'}];

Esto con el fin de facilitar la accesibilidad a los objetos, ya que los nombres pueden contener caracteres especiales como tildes. Espero te sea útil. Para realizar la búsqueda del elemento y obtener indice debes recorrer el arreglo y verificar el id o utilizar la funcion findIndex (disponible para ES2016/ES6) así:

var indice = personas.findIndex(persona => persona.id == 1);
//Ejecutar verificación y splice.

Espero te sea útil.

Edición 1

Para obtener los datos de un elemento input debes hacer lo siguiente:

html:

<input type='text' id='nombrePersona' />

js (trigger en evento click):

var personas = [{id: 1, nombre: 'Camilo'}, {id: 2, nombre: 'Andrés'}],
    inputRefValue = document.getElementById('nombrePersona').value,//Obtienes el valor del input
    nuevaPersona = {id: xx, nombre: inputRefValue};
personas.push(nuevaPersona); //Después de esto debes guardar en el localStorage

Debes tener en cuenta que el id que vas a poner en la nueva persona no puede existir en el arreglo de las personas que están en el local storage. Una buena práctica es utilizar alguna combinación de caracteres y el timestamp.

1
  • Perfecto mateo muchas gracias ya me queda claro pero ahora no se si puedas ayudarme en poner los datos con un input type text como por ejemplo mi idea es var personas [nombre] = dcoument.getElementById("texto"); pero no se como implementar que guarde ese dato dentro del JSON y lo suba al localStorage. de antemano muchas gracias por la informacion!!! Commented el 25 abr. 2018 a las 16:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.