Local Storage API en JavaScript 🍂
Tags: javascript, html, webdev, spanish
Published: 2021-08-02 17:41:19

#**Índice**   
1. [Qué es Local Storage?](#id1)
2. [Características de Local Storage](#id2)
3. [Almacenar valores en Local Storage](#id3)
4. [`JSON.stringify()` para convertir arreglos y objetos a strings](#id4)
5. [Obtener valores de Local Storage](#id5)
6. [`JSON.parse()` para convertir strings a arreglos u objetos](#id6)
7. [Eliminar valores de Local Storage](#id7)
8. [Conclusiones](#id8)
9. [Referencias](#id9)

---

## **1. ¿Qué es Local Storage?**<a name="id1"><a/>
Local Storage es una API del navegador que permite la persistencia de datos en memoria. Dichos datos se almacenan en el propio browser web y pueden ser accedidos a los mismos aun si cerramos el navegador o apagamos el computador.

## **2. Características de Local Storage**<a name="id2"><a/>
* No soporta tipos de datos numéricos, ni arreglos, ni objetos.
* Solo podemos almacenar cadenas de texto.
* `localStorage.setItem()` guarda los datos.
* `localStorage.getItem()` obtiene los datos.

## **3. Almacenar valores en Local Storage**<a name="id3"><a/>
Para poder guardar datos en el Local Storage del navegador usamos el método `setItem()` del objeto `localStorage`. Por ejemplo:
```js
localStorage.setItem('nombre', 'Cristian');
```
> Almacena una propiedad nombre con el valor de Cristian.

## 4. `JSON.stringify()` para convertir arreglos y objetos a strings <a name="id4"><a/>
Para poder almacenar arreglos y objetos en el storage es posible usar `JSON.stringify()`, esto convertirá un arreglo u objeto en string. Por ejemplo:
```js
const persona = {
  id:1,
  nombre:'Cris'
}

localStorage.setItem('persona', JSON.stringify(persona));
```
> Almacena el objeto `persona` convirtiéndolo a string con `JSON.stringify()`.

## **5. Obtener valores de Local Storage**<a name="id5"><a/>
Para obtener valores del Local Storage usamos el método `getItem()` del objeto `localStorage`. Por ejemplo:

```js
console.log(localStorage.getItem('persona'))
// "{ id:1, nombre:Cris }" es un string
```
> Obtiene el objeto `persona` en formato string.
Si intentamos obtener un valor que no existe, el navegador regresará un `null`.

## 6. `JSON.parse()` para convertir strings a arreglos u objetos <a name="id6"><a/>
Para convertir arreglos u objetos en formato string se usa el método `JSON.parse()`, por ejemplo:
```js
console.log(JSON.parse(localStorage.getItem('persona')))
// { id:1, nombre:Cris } es un objeto
```
>

## **7. Eliminar valores de Local Storage**<a name="id7"><a/>
Se usa el método `removeItem()` y recibe el `key` del elemento que deseas eliminar, por ejemplo:

```js
localStorage.removeItem('persona')
```
> Elimina el objeto `persona`

Tambíen se puede limpiar **TODO** el storage usando:
```js
localStorage.clear();
```

## **8. Conclusiones**<a name="id8"><a/>
* Es un API de los navegadores web modernos que permiten la persistencia de datos.
* Solo podemos almacenar cadenas de texto.
* `localStorage.setItem()` guarda los datos.
* `localStorage.getItem()` obtiene los datos.
* Si tratamos de obtener un dato que no existe el navegador regresa `null`.
* `JSON.stringify()` convierte un tipo de dato a string
* `JSON.parse()` opuesto al anterior.
* No existe un método de local storage que permite actualizar los datos, pero es posible hacer esto usando todos los métodos que vimos en este post

## **9. Referencias**<a name="id9"><a/>
* https://www.udemy.com/course/javascript-moderno-guia-definitiva-construye-10-proyectos/learn/lecture/21852728#content

---

Quizá pueda ser de tu interés algunos de los siguientes posts escritos por mi, dales un ojo, es gratis!

{% link https://dev.to/duxtech/el-mejor-curso-de-node-y-express-de-2021-28d2 %}

{% link https://dev.to/duxtech/npm-cheat-sheet-4ak1 %}

{% link https://dev.to/duxtech/10-preguntas-y-respuestas-frecuentes-al-momento-de-aprender-node-js-1ncl %}

---

![gif](https://media.giphy.com/media/eujb1tWaj3ZxS/giphy.gif)