You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 6-data-storage/02-localstorage/article.md
+17-17Lines changed: 17 additions & 17 deletions
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
1
# LocalStorage, sessionStorage
2
2
3
-
Los objetos de almacenaje web `localStorage` y `sessionStorage` permiten guardar pares de clave/valor en el navegador
3
+
Los objetos de almacenaje web `localStorage` y `sessionStorage` permiten guardar pares de clave/valor en el navegador.
4
4
5
-
Lo que es interesante sobre ellos es que los datos sobreviven a una recarga de página (en el caso de `sessionStorage`) y hasta un reinicio completo de navegador (en el caso de `localStorage`). Lo veremos en breves.
5
+
Lo que es interesante sobre ellos es que los datos sobreviven a una recarga de página (en el caso de `sessionStorage`) y hasta un reinicio completo de navegador (en el caso de `localStorage`). Lo veremos en breve.
6
6
7
7
Ya tenemos cookies. ¿Por qué tener objetos adicionales?
8
8
@@ -60,13 +60,13 @@ delete localStorage.test;
60
60
61
61
Esto se permite por razones históricas, y principalmente funciona, pero en general no se recomienda por dos motivos:
62
62
63
-
1. Si la clave es generada por el usuario, puede ser cualquier cosa, como `length` o `toString`, o otro método propio de `localStorage`. En este caso `getItem/setItem` funcionan correctamente, mientras que el acceso tipo objeto falla;
63
+
1. Si la clave es generada por el usuario, puede ser cualquier cosa, como `length` o `toString`, u otro método propio de `localStorage`. En este caso `getItem/setItem` funcionan correctamente, mientras que el acceso tipo objeto falla;
localStorage[key] =5; // Error, no se puede asignar 'length'
67
67
```
68
68
69
-
2. Existe un evento `storage`, que salta cuando modificamos los datos. Éste evento no salta si utilizamos el acceso tipo objeto. Lo veremos más tarde en éste capítulo.
69
+
2. Existe un evento `storage`, que se dispara cuando modificamos los datos. Este evento no se dispara si utilizamos el acceso tipo objeto. Lo veremos más tarde en este capítulo.
70
70
71
71
## Iterando sobre las claves
72
72
@@ -114,7 +114,7 @@ for(let key of keys) {
114
114
}
115
115
```
116
116
117
-
Ésta última opción funciona, ya que `Object.keys` solo devuelve las claves que pertenecen al objeto, ignorando el prototipo.
117
+
Esta última opción funciona, ya que `Object.keys` solo devuelve las claves que pertenecen al objeto, ignorando el prototipo.
118
118
119
119
## Solo strings
120
120
@@ -176,15 +176,15 @@ Esto es exactamente porque `sessionStorage` no está vinculado solamente al orí
176
176
177
177
## Evento storage
178
178
179
-
Cuando los datos se actualizan en `localStorage` o en `sessionStorage`, el evento [storage](https://www.w3.org/TR/webstorage/#the-storage-event) salta, con las propiedades:
179
+
Cuando los datos se actualizan en `localStorage` o en `sessionStorage`, el evento se dispara [storage](https://www.w3.org/TR/webstorage/#the-storage-event) con las propiedades:
180
180
181
181
-`key` – la clave que ha cambiado, (`null` si se llama `.clear()`).
182
182
-`oldValue` – el anterior valor (`null` si se añade una clave).
183
183
-`newValue` – el nuevo valor (`null` si se borra una clave).
184
184
-`url` – la url del documento donde ha pasado la actualización.
185
185
-`storageArea` – bien el objeto `localStorage` o `sessionStorage`, donde se ha producido la actualización.
186
186
187
-
El hecho importante es: el evento salta en todos los objetos `window` donde el almacenaje es accesible, excepto en el que lo ha causado.
187
+
El hecho importante es: el evento se dispara en todos los objetos `window` donde el almacenaje es accesible, excepto en el que lo ha causado.
188
188
189
189
Vamos a desarrollarlo.
190
190
@@ -194,10 +194,10 @@ Imagina que tienes dos ventanas con el mismo sitio en cada una, de modo que `loc
194
194
Quizá quieras abrir ésta página en dos ventanas distintas para probar el código que sigue.
195
195
```
196
196
197
-
Si ámbas ventanas están escuchando el evento `window.onstorage`, cada una reaccionará a las actualizaciones que pasen en la otra.
197
+
Si ambas ventanas están escuchando el evento `window.onstorage`, cada una reaccionará a las actualizaciones que pasen en la otra.
198
198
199
199
```js run
200
-
// salta en actualizaciones hechas en el mismo almacenaje, des de otros documentos
200
+
// se dispara en actualizaciones hechas en el mismo almacenaje, desde otros documentos
@@ -210,11 +210,11 @@ Hay que tener en cuenta que el evento también contiene: `event.url` -- la url d
210
210
211
211
También que `event.storageArea` contiene el objeto de almacenaje -- el evento es el mismo para `sessionStorage` y `localStorage`, de modo que `storageArea` referencia el que se modificó. Podemos hasta querer cambiar datos en él, para "responder" a un cambio.
212
212
213
-
**Ésto permite que distintas ventanas del mismo orígen puedan intercambiar mensajes.**
213
+
**Esto permite que distintas ventanas del mismo orígen puedan intercambiar mensajes.**
214
214
215
-
Los navegadores modernos también soportan la [API de Broadcast channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API), la API específica para la comunicación entre ventanas del mismo orígen. Es más completa, pero tiene menos soporte. Hay librerías que añaden polyfills para ésta API, basados en `localStorage`, para que se pueda utilizar en cualquier entorno.
215
+
Los navegadores modernos también soportan la [API de Broadcast channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API), la API específica para la comunicación entre ventanas del mismo orígen. Es más completa, pero tiene menos soporte. Hay librerías que añaden polyfills para ésta API basados en `localStorage` para que se pueda utilizar en cualquier entorno.
216
216
217
-
## Resúmen
217
+
## Resumen
218
218
219
219
Los objetos de almacenaje web `localStorage` y `sessionStorage` permiten guardar pares de clave/valor en el navegador.
220
220
- Tanto la `clave` como el `valor` deben ser strings, cadenas de texto.
@@ -224,7 +224,7 @@ Los objetos de almacenaje web `localStorage` y `sessionStorage` permiten guardar
224
224
225
225
|`localStorage`|`sessionStorage`|
226
226
|----------------|------------------|
227
-
| Compartida entre todas las pestañas y ventanas que tengan el mismo orígen | Accesible en una pestaña del navegador, incluyendo iframes del mismo orígen|
227
+
| Compartida entre todas las pestañas y ventanas que tengan el mismo orígen | Accesible en una pestaña del navegador, incluyendo iframes del mismo origen|
228
228
| Sobrevive a reinicios del navegador | Muere al cerrar la pestaña |
229
229
230
230
API:
@@ -236,10 +236,10 @@ API:
236
236
-`key(índice)`-- coje la clave en una posición determinada.
237
237
-`length`-- el número de ítems almacenados.
238
238
- Utiliza `Object.keys` para conseguir todas las claves.
239
-
- Puede utilizar las claves como propiedades de objetor, pero en ese caso el evento `storage` no salta
239
+
- Puede utilizar las claves como propiedades de objetor, pero en ese caso el evento `storage` no se dispara
240
240
241
241
Evento storage:
242
242
243
-
-Salta en las llamadas a `setItem`, `removeItem`, `clear`.
243
+
-Se dispara en las llamadas a `setItem`, `removeItem`, `clear`.
244
244
- Contiene todos los datos relativos a la operación, la `url` del documento y el objeto de almacenaje.
245
-
-Salta en todos los objetos `window` que tienen acceso al almacenaje excepto el que ha generado el evento (en una pestaña en el caso de `sessionStorage` o globalmente en el caso de `localStorage`).
245
+
-Se dispara en todos los objetos `window` que tienen acceso al almacenaje excepto el que ha generado el evento (en una pestaña en el caso de `sessionStorage` o globalmente en el caso de `localStorage`).
0 commit comments