2

Estoy intentando hacer un programa que necesita que un array tenga unos datos que tu le metes a través de un botón. Lo que pasa es que cuando reinicio la página los datos del array se resetean (porque en el código yo lo he declarado como un array vacío). ¿Cómo puedo hacer que una vez le meta un dato a través del botón permanezca ahí incluso si reinicio la página.

Gracias.

2 respuestas 2

1

Para guardar información y no perderla al recargar paginas puedes usar un almacenamiento temporal.. como por ejemplo localStorage o session Storage con javascript es tan sencillo como:

localStorage.setItem('Miejemplo', 'Este es un ejemplo');

En este caso estas declarando un elemento llamado Miejemplocon el valor de 'Este es un ejemplo' y lo obtienes de la siguiente forma :

var ejemplo= localStorage.getItem('Miejemplo');
//Eliminando del local storage
localStorage.removeItem('Miejemplo');

De esta forma puedes almacenar información temporalmente en la memoria del navegador sin perderla al recargar la página, te dejo un poco de información al respecto en el siguiente enlace: Doc localstorage

1

Existen varias formas de guardar información al recargar la pagina. Aunque yo voy a explicar la forma mas común cuando se está empezando y te dejaré algunos enlaces interesantes al final del todo.

La forma mas común es utilizar Storage

Existen dos tipos de Storage: localStorage y sessionStorage, pero ¿Que diferencias hay?

La diferencia reside en que localStorage almacena la información de forma indefinida o hasta que se decida limpiar los datos del navegador(Al borrar la caché por ejemplo) y sessionStorage almacena información mientras la pestaña donde se esté utilizando siga abierta.

pongamos un ejemplo sencillo de como usarlos:

localStorage

//Guardar datos
localStorage.setItem('clave', 'valor')

//Obtener un dato (En este caso nuestra variable almacena "valor")
variable = localStorage.getItem('clave')

//Borrar un dato
localStorage.removeItem('clave')

// Borrar todos los datos
localStorage.clear()

Para sessionStorage, la forma de uso es prácticamente idéntica

sessionStorage

//Guardar datos
sessionStorage.setItem('clave', 'valor')

//Obtener un dato (En este caso nuestra variable almacena "valor")
variable = sessionStorage.getItem('clave')

//Borrar un dato
sessionStorage.removeItem('clave')

// Borrar todos los datos
sessionStorage.clear()

Cabe destacar que para reemplazar un dato puedes usar el método setItem con una key que ya exista y lo va a sobreescribir

// Escribimos nuestro primer valor
sessionStorage.setItem('color', 'azul')

// Sobreescribimos nuestro primer valor con nuestro segundo valor
sessionStorage.setItem('color', 'amarillo')

//Obtenemos el valor
var_color = sessionStorage.getItem('color')

console.log(var_color)
//OUTPUT: 'amarillo' 

como puedes ver en los ejemplos, podemos guardar cierta cantidad de datos en el navegador. Ademas, puedes ver los datos almacenados en el navegador a través de las opciones de desarrollador (Se suele acceder con F11 o F12).

introducir la descripción de la imagen aquí Imagen de las opciones de desarrollador

Como puedes ver, en las pestañas de las opciones de desarrollador, tenemos distintas opciones (Entre ellas, console, application, etc..).

Pues la que nos interesa en este caso es la pestaña application, donde podemos ver todos los "almacenes de información" de los que disponemos. Entre ellos Local Storage y Session Storage.

Te he dejado un localStorage.setItem("Hola", "mundo") para que puedas apreciar como se presentan los datos guardados.

Para terminar, también es posible guardar la información en cookies o en IndexDB. Te dejo un par de enlaces que te pueden interesar donde puedes ampliar la información:

Un Saludo.

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