diff --git a/6-data-storage/02-localstorage/article.md b/6-data-storage/02-localstorage/article.md index 41a895b05..17ba9f0bf 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 breve. -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)` -- 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. -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`, 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 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. -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.** +**Esto 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 +## Resumen -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 origen | +| 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 se dispara -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`). +- 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. +- 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`).