Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del import

Interfaz del navegador

Introducción - DOM API
Creando un documento
Accediendo a los elementos
Atributos, propriedades y métodos

Eventos
Eventos del ratón
Eventos del teclado
Eventos de foco
Eventos de arrastre

Query string

Usando objetos y librerías Javascript

Módulos específicos de Brython

El módulo integrado `browser`
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

javascript

Trabajando con Brython

Opciones de la función brython()
Testing y depuración
Desplegando una aplicación

Cookbook

Hola Mundo !
Insertar contenido en un elemento
Marcado HTML (bold,italic...)
Tabla HTML
Añadir (*bind*) y eliminar (*unbind*) eventos
Handle options in a SELECT
Arrastrar y soltar
Obtener el contenido de un elemento
Leer el contenido de un fichero
Almacenar objetos localmente
Ejemplo de onmouseover
 

Módulos browser.local_storage y browser.session_storage

Este módulo usa el almacenamiento local definido en HTML5. La especificación se puede encontrar siguiendo este enlace

¿Qué es el el almacenamiento local (localStorage de HTML5):

  • localStorage es una base de datos clave-valor que funciona en el cliente, i.e. los datos se almacenan en el navegador del usuario. Esto significa que los datos se guardan dentro del navegador en tu máquina. Esto también significa que los datos almacenados solo estarán disponibles para el usuario en la misma máquina y mismo navegador. Recuerda que local_storage es por navegador y no por ordenador.
  • Las claves y valores son cadenas.
  • Las claves y valores se almacenan de forma persistente en un protocolo, dominio y puerto específicos. Las bases de datos local_storage trabajan en el ámbito de un origen HTML5, basicamente la tupla (esquema, host, puerto, i.e. scheme://host:port). Esto significa que la base de datos será compartida en todas las páginas alojadas en el mismo dominio, incluso de forma concurrente mediante múltiples pestañas del navegador. Sin embargo, una página que se conecte por http:// no podrá ver una base de datos que fue creada mediante una sesión https://.

HTML5 define dos tipos de almacenamiento, local storage y session storage ; el primero es persistente, i.e. mantiene los datos en el almacén cuando el usuario cierra la ventana ; con el segundo se pierden los datos cuando el usuario cierra la ventana.

En Brython, el local storage de HTML5 se encuentra implementado en el paquete browser en los siguientes módulos:

  • local_storage
    Este módulo permite acceder a un único objeto storage, el cual da acceso a local storage. Se puede interactuar con el mismo como si fuera un diccionario Python, sin embargo, hay que tener en cuenta que las claves y los valores están restringidos a cadenas.
  • session_storage
    Este módulo también permite acceder al objeto storage, que permite acceder a session storage que es similar al anterior. Usa session_storage cuando no deseas que los datos se compartan entre diferentes sesiones del navegador o entre pestañas del mismo. Un caso de uso típico es un token para hacer log-in.

Un ejemplo simple sería como sigue:

from browser.local_storage import storage
storage['foo'] = 'bar'
print(storage['foo'])

Ahora, si cierras la pestaña, tu navegador o incluso la máquina cuando la vuelvas a abrir el mismo navegador tendrás acceso a los valores almacenados por la clave 'foo' en el mismo scheme://host:port donde el par clave-valor fue almacenado.

Si quieres eliminar de forma permanente un par clave-valor puedes usar la siguiente sintaxis:

del storage['foo']
print(storage['foo']) # raises KeyError

El objeto storage imita la funcionalidad de un diccionario y soportan:

  • get
  • pop
  • keys
  • values
  • items
  • clear
  • __len__
  • __contains__
  • __iter__

Destacar que keys, values e items devuelven una copia de una lista en lugar de una vista.

Un ejemplo más completo que hace uso de local_storage, una aplicación que almacena listas de cosas a hacer (TO-DO), se puede ver en el siguiente iframe de más abajo.