Javascript cross-domain localStorage

Utilidad para compartir el mismo espacio de localStorage entre varios dominios (o subdominios) distintos.

Si tienes varias webs, o varias formas de acceder a una web como www.miweb.com, miweb.com, wiki.miweb.com, etc.., la información almacenada por cualquiera de ellas con javaScript en el espacio de localStorage del navegador, no será accesible para el resto de dominios. Esto se puede solventar mediante el uso de un iframe oculto y la función postMessage soportada por la mayoría de navegadores.

El truco consiste en cargar un iframe con la URL con la que quieras almacenar la información, y pasarle las peticiones de setItem o getItem a dicho frame. La principal diferencia es que esas funciones son síncronas con localStorage, pero hay que hacerlas asíncronas para adaptarlas al sistema de comunicación entre el iframe y la página contenedora.

En principio necesitamos el archivo html con el código del iframe en el servidor, por ejemplo (código en GitHub), y añadir tus dominios a la lista whitelist:

Con esto ya podemos usar esta función (crossDomainStorage) para el almacenamiento entre dominios. Ejemplo de uso:

Otra cuestión es que, al contrario que las cookies, localStorage no tiene “fecha de caducidad” y para según qué usos el espacio ocupado puede crecer hasta alcanzar el límite del navegador a medio/largo plazo. Para ello he implementado un par de clases que definen una lista con un tamaño prefijado, una de ellas almacena directamente en localStorage y la otra usa la clase anterior “crossDomainStorage” para hacerlo de forma asíncrona a través del iframe.

Puedes encontrar el código completo en GitHub.

localStorage/sessionStorage con un número máximo de elementos (limitedStorage.js)

Para crear el objeto se indican el número máximo de elementos que contendrá. Opcionalmente se puede especificar el almacenamiento que se quiere usar (localStorage o sessionStorage), y un prefijo para los nombres de las variables en dicho sistema de almacenamiento. (el resto de la documentación y más ejemplos en el repositorio en GitHub)
Es una cola: Si se alcanza el límite, primero en entrar -> primero en salir
Si se añade un elemento que ya estaba (con “set(key, item)”), será puesto al final de la cola de nuevo.

Se puede usar igual que los objetos localStorage o sessionStorage:
Funciones:

  • setItem(key, value) ‘value’ debe ser serializable con JSON.stringify.
  • getItem(key) Si la clave no existe devuelve null
  • removeItem(key) Borra el valor asociado a la clave

Ejemplo de uso:

 
Tagged , , . Bookmark the permalink.

3 Responses to Javascript cross-domain localStorage

  1. Very good article, Just I need.
    Thank you!!!

  2. Daniel Jimenez says:

    tengo dos dominios locales, (mi-dominio.local y subdominio.mi-dominio.local) desde mi-dominio.local logro cargar el subdomino y su localstorage, el problema es cuando quiero acceder a alguna key de ese subdominio, no me permiete acceder, utilizo este código

    Storage = cross_domain_storage({origin: “http://mi-dominio.local”, path: ‘//subdominio.mi-dominio.local/logout’});
    cdstorage = cross_domain_list_storage(Storage, {max_items:20 , var_name:’crossD_storage’});

    necesito declarar algo mas?
    mi idea es acceder a las keys del localstorage del subdominio para eliminarlos y no logro hacerlos , espero puedan auxiliarme

  3. Carlos L says:

    Esto no funciona con Internet Explorer 11 con Windows 7.

Leave a Reply

Your email address will not be published. Required fields are marked *