Estoy tratando de guardar los datos en mi objeto desde los archivos de entrada usando localStorage pero cuando agrego un valor en la entrada y lo guardo, se guarda, pero cuando intento agregar un nuevo valor, elimina el valor anterior y agrega el nuevo en su lugar. Mis demandas son las siguientes:
localStorage . Cómo puedo hacer eso ? aquí está el código: JavaScript :
let links = { team1: { icon: "FCL.png", list: [{ name: "Real Madrid", url: "www.Real Madrid.com" }] }, team2: { icon: "FCL.png", list: [{ name: "FC Barcelona", url: "www.FCB.com" }] }, fav: { icon: "fav.png", list: [] } }; $("#click").click(function () { const link = document.querySelector("#link").value; const name = document.querySelector("#name").value; links["fav"].list.push({ url: link, name: name }); localStorage.setItem("links", JSON.stringify(links)); console.log(localStorage.setItem("links", JSON.stringify(links))); });HTML:
<form name="form1" action=""> <input type="text" name="link" id="link" /> <input type="text" name="name" id="name" /> <button id="click">click</button> </form>aquí sandbox: ingrese la descripción del enlace aquí
Entonces, el problema es que cuando está recargando la página web, la variable de links obtiene el valor inicial que declaró en su código. Si desea continuar con los enlaces de actualización, primero debe verificar si los enlaces ya existen en localStorage , si es así, luego asígnelos a los links o establezca el valor predeterminado.
Ejemplo:
const localStorageLinks = JSON.parse(localStorage.getItem("links")) let links = localStorageLinks || { team1: { icon: "FCL.png", list: [{ name: "Real Madrid", url: "www.Real Madrid.com" }] }, team2: { icon: "FCL.png", list: [{ name: "FC barcelona", url: "www.FCL.com" }] }, fav: { icon: "fav.png", list: [] } };Ahora, incluso si vuelve a cargar la página, sus enlaces tendrán los últimos enlaces actualizados.
El método setItem() agregará la clave al objeto LocalStorage dado, o actualizará (reemplazará) el valor de esa clave si ya existe. Si
Tiene que usar el método JSON.parse() analiza una cadena JSON en LocalStorage, agregue el nuevo valor.
list = JSON.parse(localStorage.getItem("links") || []; list.push({ url: link, name: name }); localStorage.setItem("links", JSON.stringify(links));