Persistencia de Datos en Javascript (LocalStorage)
Tags: javascript, programming, beginners, spanish
Published: 2022-12-07 15:45:01

Hay un momento en nuestro aprendizaje en el sendero de Javascript, donde nos paramos a pensar: Todos estos datos se borran cuando refresco la página, me gustaría empezar a guardarlos / persistirlos.

Entonces, escuchamos sobre bases de datos y pensamos que debemos implementar un engine como MySQL, MongoDB. Es difícil porque nos tenemos que involucrar con tecnologías de servidor como NodeJS, y si bien es un gran avance, nos desvía del foco inicial porque tenemos que invertir muchas horas en aprender conceptos nuevos para aplicar un propósito tan simple como la persistencia de ese objeto persona que va a morir en el siguiente F5.

## Pero podemos manejarlo!
No vamos a engañar a nadie, usar bases de datos es la mejor forma y más segura de persistir información. Pero tenemos una alternativa mas sencilla y rápida llamada LocalStorage.

La implementación es muy sencilla, y vamos a ir desde lo mas simple como una variable hasta lo mas complejo como un JSON Object.

## Guardar un String
Supongamos que queremos guardar una entidad persona. Nos centramos en su nombre, el cual metemos en una variable:

```javascript
var name = "Maxi";
```

Luego debemos elegir un valor clave, por ejemplo “person” y guardar dicho string en nuestro LocalStorage. Lo hacemos de la siguiente manera:

```javascript
localStorage.setItem("person", name);
```

Si nosotros ejecutamos nuestro script y abrimos la consola de Chrome (Control + Shift + I), y luego nos vamos a la pestaña Application > Storage > LocalStorage, nos vamos a encontrar con lo siguiente:

![Consola Chrome LocalStorage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk9e94t12753kqocl8c7.png)

Con esto confirmamos que el valor fue guardado, y aunque eliminemos las lineas de código del localStorage, el valor va a continuar ahi hasta que limpiemos cache del navegador. Pero como lo obtenemos para utilizarlo en otro lado, como por ejemplo mostrarlo en consola? Muy simple:

```javascript
var name = localStorage.getItem("person");
```

Si nunca guardamos “person” en LocalStorage, entonces getItem() nos devolverá undefined, por lo cual podríamos condicionarlo:

```javascript
var name;
 
if(localStorage.getItem("person")){
    name = localStorage.getItem("person");
} else {
    name = "No soy una persona";
}
```

Luego para mostrar el valor almacenado, es tan simple como usar un console log:

```javascript
console.log(name);
```

## Guardar un Array
Si consideramos que estamos guardando un nombre de persona, quizá tengamos que guardar una lista de nombres. Para ello utilizaremos un array de la siguiente manera:

```javascript
var names = ["Maxi", "Tomas", "Val"];
localStorage.setItem("persons", names);
```

Luego para poder obtenerlo, lo iteramos:

```javascript
var names = localStorage.getItem("persons");
 
for(var i = 0; i < names.length; i++){
    console.log(names[i]);
}
```

## Guardar un Objeto
En realidad si guardamos personas, no nos sirve solo almacenar el nombre. Necesitamos mas datos como su número de documento, apellido, dirección, email. Entonces necesitamos un objeto como este:

```javascript
var person = {
    "firstName": "Maxi",
    "lastName": "Tompson",
    "document": 32432423
}
```

La lógica dice que deberíamos poder guardarlo en localStorage de la siguiente manera:

```javascript
localStorage.setItem("person", person);
```

Ahora armamos la obtención del dato:

```javascript
var personFromLS = localStorage.getItem("person");
console.log("Persona " + personFromLS.firstName);
```

Esto nos debería mostrar el string “Persona Maxi”, pero nos devuelve:

```
Persona undefined
```

Pero como puede ser? Esto es porque localstorage no almacena objetos. Pero a fin de cuentas necesitamos que lo haga, entonces que podemos hacer?

## Guardar un JSON Object
JSON es técnicamente un string, por lo que nuestro localstorage va a permitir que se guarde. Entonces vamos a convertir nuestro objeto en un json string y guardarlo:

```javascript
var person = {
    "firstName": "Maxi",
    "lastName": "Tompson",
    "document": 32432423
}
var jsonPerson = JSON.stringify(person);
localStorage.setItem("person", jsonPerson);
```

Y de esta manera, cuando queramos obtener ese json del localstorage, lo convertiremos a un objeto javascript nuevamente:

```javascript
var personJSONFromLS = localStorage.getItem("person");
var personFromLS = JSON.parse(personJSONFromLS);
console.log("Persona " + personFromLS.firstName);
```

Entonces podemos concluir en lo siguiente:

- JSON.stringify(): Convierte JS Object a JSON Object.
- JSON.parse(): Convierte JSON Object a JS Object.

De esta manera podemos almacenar objetos en LocalStorage, primero almacenandolos como json string y luego parseandolos para manejarlos en javascript.