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`). pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy