From 17edefb847a0fdf0f688bc64a281f6a521853110 Mon Sep 17 00:00:00 2001 From: Arnau Giralt <50662025+arnaugiralt@users.noreply.github.com> Date: Tue, 30 Jul 2019 12:30:16 +0200 Subject: [PATCH 1/3] Translate localStorage & sessionStorage --- 6-data-storage/02-localstorage/article.md | 200 +++++++++++----------- 1 file changed, 99 insertions(+), 101 deletions(-) diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index 41a895b05..c6c58747a 100644 --- a/6-data-storage/02-localstorage/article.md +++ b/6-data-storage/02-localstorage/article.md @@ -1,81 +1,80 @@ # LocalStorage, sessionStorage -Web storage objects `localStorage` and `sessionStorage` allow to save key/value pairs in the browser. +Los objetos de almacenaje web `localStorage` y `sessionStorage` permiten guardar pares de clave/valor en el navegador -What's interesting about them is that the data survives a page refresh (for `sessionStorage`) and even a full browser restart (for `localStorage`). We'll see that very soon. +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. -We already have cookies. Why additional objects? +Ya tenemos cookies. ¿Por qué tener objetos adicionales? -- Unlike cookies, web storage objects are not sent to server with each request. Because of that, we can store much more. Most browsers allow at least 2 megabytes of data (or more) and have settings to configure that. -- The server can't manipulate storage objects via HTTP headers, everything's done in JavaScript. -- The storage is bound to the origin (domain/protocol/port triplet). That is, different protocols or subdomains infer different storage objects, they can't access data from each other. +- Al contrario que las cookies, los objetos de almacenaje web no se envian al servidor en cada petición. Debido a esto, podemos almacenar mucha más información. La mayoría de navegadores permiten almacenar, como mínimo, 2 megabytes de datos (o más) y tienen opciones para configurar éstos límites. +- El servidor no puede manipular los objetos de almacenaje via cabezeras HTTP, todo se hace via JavaScript. +- El almacenaje está vinculado al orígen (al triplete dominio/protocolo/puerto). Esto significa que distintos protocolos o subdominios tienen distintos objetos de almacenaje, no pueden acceder a otros datos que no sean los suyos. -Both storage objects provide same methods and properties: +Ámbos objetos de almacenaje proveen los mismos métodos y propiedades: -- `setItem(key, value)` -- store key/value pair. -- `getItem(key)` -- get the value by key. -- `removeItem(key)` -- remove the key with its value. -- `clear()` -- delete everything. -- `key(index)` -- get the key on a given position. -- `length` -- the number of stored items. +- `setItem(clave, valor)` -- almacena un par clave/valor. +- `getItem(clave)` -- coje el valor para una clave. +- `removeItem(clave)` -- elimina la clave y su valor. +- `clear()` -- bórralo todo. +- `key(índice)` -- coje la clave en una posición determinada. +- `length` -- el número de ítems almacenados. -Let's see how it works. +Vamos a ver cómo funciona. -## localStorage demo +## Demo de localStorage -The main features of `localStorage` are: +Las principales funcionalidades de `localStorage` son: -- Shared between all tabs and windows from the same origin. -- The data does not expire. It remains after the browser restart and even OS reboot. - -For instance, if you run this code... +- Es compartido entre todas las pestañas y ventanas del mismo orígen. +- Los datos no expiran. Persisten reinicios de navegador y hasta del sistema operativo. +Por ejemplo, si ejecutas éste código... ```js run localStorage.setItem('test', 1); ``` -...And close/open the browser or just open the same page in a different window, then you can get it like this: +... y cierras/abres el navegador, o simplemente abres la misma página en otra ventana, puedes cojer el ítem que hemos guardado de éste modo: ```js run alert( localStorage.getItem('test') ); // 1 ``` -We only have to be on the same domain/port/protocol, the url path can be different. +Solo tenemos que estar en el mismo dominio/puerto/protocolo, la url puede ser distinta. -The `localStorage` is shared, so if we set the data in one window, the change becomes visible in the other one. +`localStorage` es compartido, de modo que si guardamos datos en una ventana, el cambio es visible en la otra. -## Object-like access +## Acceso tipo Objeto -We can also use a plain object way of getting/setting keys, like this: +Tambien podemos utilizar un modo de acceder/guardar claves del mismo modo que se hace con objetos, así: ```js run -// set key +// guarda una clave localStorage.test = 2; -// get key +// coje una clave alert( localStorage.test ); // 2 -// remove key +// borra una clave delete localStorage.test; ``` -That's allowed for historical reasons, and mostly works, but generally not recommended for two reasons: +Esto se permite por razones históricas, y principalmente funciona, pero en general no se recomienda por dos motivos: -1. If the key is user-generated, it can be anything, like `length` or `toString`, or another built-in method of `localStorage`. In that case `getItem/setItem` work fine, while object-like access fails: +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; ```js run let key = 'length'; localStorage[key] = 5; // Error, can't assign length ``` + +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. -2. There's a `storage` event, it triggers when we modify the data. That event does not happen for object-like access. We'll see that later in this chapter. - -## Looping over keys +## Iterando sobre las claves -Methods provide get/set/remove functionality. But how to get all the keys? +Los métodos proporcionan la funcionalidad get / set / remove. ¿Pero cómo conseguimos todas las claves? -Unfortunately, storage objects are not iterable. +Desafortunadamente, los objetos de almacenaje no son iterables. -One way is to use "array-like" iteration: +Una opción es utilizar iteración "tipo array": ```js run for(let i=0; i { if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); @@ -208,40 +206,40 @@ window.onstorage = event => { localStorage.setItem('now', Date.now()); ``` -Please note that the event also contains: `event.url` -- the url of the document where the data was updated. +Hay que tener en cuenta que el evento también contiene: `event.url` -- la url del documento en que se actualizaron los datos. -Also, `event.storageArea` contains the storage object -- the event is the same for both `sessionStorage` and `localStorage`, so `storageArea` references the one that was modified. We may event want to set something back in it, to "respond" to a change. +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. -**That allows different windows from the same origin to exchange messages.** +**Ésto permite que distintas ventanas del mismo orígen puedan intercambiar mensajes.** -Modern browsers also support [Broadcast channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API), the special API for same-origin inter-window communication, it's more full featured, but less supported. There are libraries that polyfill that API, based on `localStorage`, that make it available everywhere. +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. -## Summary +## Resúmen -Web storage objects `localStorage` and `sessionStorage` allow to store key/value in the browser. -- Both `key` and `value` must be strings. -- The limit is 2mb+, depends on the browser. -- They do not expire. -- The data is bound to the origin (domain/port/protocol). +Los objetos de almacenaje web `localStorage` y `sessionStorage` permiten guardar pares de clave/valor en el navegador. +- Tanto la `clave` como el `valor` deben ser strings, cadenas de texto. +- El límite es de más de 2mb; depende del navegador. +- No expiran. +- Los datos están vinculados al orígen (domínio/puerto/protocolo). | `localStorage` | `sessionStorage` | |----------------|------------------| -| Shared between all tabs and windows with the same origin | Visible within a browser tab, including iframes from the same origin | -| Survives browser restart | Dies on tab close | +| 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 | +| Sobrevive a reinicios del navegador | Muere al cerrar la pestaña | API: -- `setItem(key, value)` -- store key/value pair. -- `getItem(key)` -- get the value by key. -- `removeItem(key)` -- remove the key with its value. -- `clear()` -- delete everything. -- `key(index)` -- get the key on a given position. -- `length` -- the number of stored items. -- Use `Object.keys` to get all keys. -- Can use the keys as object properties, in that case `storage` event doesn't trigger. +- `setItem(clave, valor)` -- guarda pares clave/valor. +- `getItem(clave)` -- coje el valor de una clave. +- `removeItem(clave)` -- borra una clave con su valor. +- `clear()` -- bórralo todo. +- `key(índice)` -- coje la clave en una posición determinada. +- `length` -- el número de ítems almacenados. +- Utiliza `Object.keys` para conseguir todas las claves. +- Puede utilizar las claves como propiedades de objetor, pero en ese caso el evento `storage` no salta -Storage event: +Evento storage: -- Triggers on `setItem`, `removeItem`, `clear` calls. -- Contains all the data about the operation, the document `url` and the storage object. -- Triggers on all `window` objects that have access to the storage except the one that generated it (within a tab for `sessionStorage`, globally for `localStorage`). +- Salta en las llamadas a `setItem`, `removeItem`, `clear`. +- Contiene todos los datos relativos a la operación, la `url` del documento y el objeto de almacenaje. +- 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`). From 1cba4353ab28245162ba8e37fb1935dfee45debf Mon Sep 17 00:00:00 2001 From: Tomas Scandalitta <38343557+tscandalitta@users.noreply.github.com> Date: Sat, 7 Sep 2019 22:29:25 -0300 Subject: [PATCH 2/3] Update article.md --- 6-data-storage/02-localstorage/article.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index c6c58747a..0ebf22511 100644 --- a/6-data-storage/02-localstorage/article.md +++ b/6-data-storage/02-localstorage/article.md @@ -12,11 +12,11 @@ Ya tenemos cookies. ¿Por qué tener objetos adicionales? Ámbos objetos de almacenaje proveen los mismos métodos y propiedades: -- `setItem(clave, valor)` -- almacena un par clave/valor. -- `getItem(clave)` -- coje el valor para una clave. -- `removeItem(clave)` -- elimina la clave y su valor. -- `clear()` -- bórralo todo. -- `key(índice)` -- coje la clave en una posición determinada. +- `setItem(clave, valor)` -- almacenar un par clave/valor. +- `getItem(clave)` -- obtener el valor por medio de la clave. +- `removeItem(clave)` -- eliminar la clave y su valor. +- `clear()` -- borrar todo. +- `key(índice)` -- obtener la clave de una posición dada. - `length` -- el número de ítems almacenados. Vamos a ver cómo funciona. From 599e93fd3e4112eadd403ffbeba260132e22978f Mon Sep 17 00:00:00 2001 From: joaquinelio Date: Wed, 3 Jun 2020 03:51:41 -0300 Subject: [PATCH 3/3] Update article.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ortografía, correcciones. --- 6-data-storage/02-localstorage/article.md | 34 +++++++++++------------ 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index 0ebf22511..17ba9f0bf 100644 --- a/6-data-storage/02-localstorage/article.md +++ b/6-data-storage/02-localstorage/article.md @@ -1,8 +1,8 @@ # LocalStorage, sessionStorage -Los objetos de almacenaje web `localStorage` y `sessionStorage` permiten guardar pares de clave/valor en el navegador +Los objetos de almacenaje web `localStorage` y `sessionStorage` permiten guardar pares de clave/valor en el navegador. -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. +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. Ya tenemos cookies. ¿Por qué tener objetos adicionales? @@ -60,13 +60,13 @@ delete localStorage.test; Esto se permite por razones históricas, y principalmente funciona, pero en general no se recomienda por dos motivos: -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; +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; ```js run let key = 'length'; - localStorage[key] = 5; // Error, can't assign length + localStorage[key] = 5; // Error, no se puede asignar 'length' ``` -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. +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. ## Iterando sobre las claves @@ -114,7 +114,7 @@ for(let key of keys) { } ``` -Ésta última opción funciona, ya que `Object.keys` solo devuelve las claves que pertenecen al objeto, ignorando el prototipo. +Esta última opción funciona, ya que `Object.keys` solo devuelve las claves que pertenecen al objeto, ignorando el prototipo. ## Solo strings @@ -176,7 +176,7 @@ Esto es exactamente porque `sessionStorage` no está vinculado solamente al orí ## Evento storage -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: +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: - `key` – la clave que ha cambiado, (`null` si se llama `.clear()`). - `oldValue` – el anterior valor (`null` si se añade una clave). @@ -184,7 +184,7 @@ Cuando los datos se actualizan en `localStorage` o en `sessionStorage`, el event - `url` – la url del documento donde ha pasado la actualización. - `storageArea` – bien el objeto `localStorage` o `sessionStorage`, donde se ha producido la actualización. -El hecho importante es: el evento salta en todos los objetos `window` donde el almacenaje es accesible, excepto en el que lo ha causado. +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. Vamos a desarrollarlo. @@ -194,10 +194,10 @@ Imagina que tienes dos ventanas con el mismo sitio en cada una, de modo que `loc Quizá quieras abrir ésta página en dos ventanas distintas para probar el código que sigue. ``` -Si ámbas ventanas están escuchando el evento `window.onstorage`, cada una reaccionará a las actualizaciones que pasen en la otra. +Si ambas ventanas están escuchando el evento `window.onstorage`, cada una reaccionará a las actualizaciones que pasen en la otra. ```js run -// salta en actualizaciones hechas en el mismo almacenaje, des de otros documentos +// se dispara en actualizaciones hechas en el mismo almacenaje, desde otros documentos window.onstorage = event => { if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); @@ -210,11 +210,11 @@ Hay que tener en cuenta que el evento también contiene: `event.url` -- la url d 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. -**Ésto permite que distintas ventanas del mismo orígen puedan intercambiar mensajes.** +**Esto permite que distintas ventanas del mismo orígen puedan intercambiar mensajes.** -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. +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. -## Resúmen +## Resumen Los objetos de almacenaje web `localStorage` y `sessionStorage` permiten guardar pares de clave/valor en el navegador. - 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 | `localStorage` | `sessionStorage` | |----------------|------------------| -| 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 | +| 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 | | Sobrevive a reinicios del navegador | Muere al cerrar la pestaña | API: @@ -236,10 +236,10 @@ API: - `key(índice)` -- coje la clave en una posición determinada. - `length` -- el número de ítems almacenados. - Utiliza `Object.keys` para conseguir todas las claves. -- Puede utilizar las claves como propiedades de objetor, pero en ese caso el evento `storage` no salta +- Puede utilizar las claves como propiedades de objetor, pero en ese caso el evento `storage` no se dispara Evento storage: -- Salta en las llamadas a `setItem`, `removeItem`, `clear`. +- Se dispara en las llamadas a `setItem`, `removeItem`, `clear`. - Contiene todos los datos relativos a la operación, la `url` del documento y el objeto de almacenaje. -- 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`). +- 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`).