---
# System prepended metadata

title: Compartir datos entre páginas 2

---

# Compartir datos entre páginas 2
Hay dos formas de poder compartir información entre distintas páginas:
- **variables globales**, de este modo serían accesibles desde cualquier página independientemente de la navegación realizada y se quedarían cacheadas
- **query params**, de este modo se mandaría lso datos a través de la url

## Variables globales
El primer paso que hay que hacer es declarar e inicializar el array de params que contendrá la página deseada

```javascript=
const base = {
    hash: 'nombre-de-la-pagina',
    currentPage: {
      url: '/path',
      params: []
    }
```

Declararemos en el componente definido en nuestra página, a nivel de las propiedades in, out, la propiedad params, donde definiremos todos los parametros que nos interese guardar
```javascript=
{
        zone: 'app__main',
        type: 'DM',
        tag: 'xxx',
        properties: {
          cellsConnections: {
            in: {},
            out: {},
            params: {
              accounts: 'globalAccounts',
              cards: 'globalCards',
            }
          }
        }
      }
```
A la hora de declarar la propiedad y la variable global, la sintáxis es la siguiente:
```javascript=
params: {
  propiedadDelComponente: 'nombreDeLaVariableGlobal'
}
```

En el componente que emite los datos, tendremos que definir las propiedades con **notify a true**

```javascript=
cosas: {
    type: Array,
    notify: true,
    value: () => []
    }
```

## Query params

En la página tendremos que declarar la pagina destino y los pámetros que deseamos enviar, todo dentro de un canal
```javascript=
event_channel: {
    bind: 'event',
    link: {
      page: 'distinationPage',
      params: {
        paramName: 'paramName'
      }
    }
  },
```

En el componente emitiremos un evento con los parámetros que queramos enviar a la otra página

```javascript=
    dispatchEvent(new CustomEvent(eventName, {
      detail: {
        paramName1: paramName1,
        paramName2: paramName2
      },
      bubbles: true,
      composed: true
        }));
```
En la página destino declararemos las propiedades dinámicas de la siguiente forma
```javascript=
destinationPage: {
      url: '/destination-page/:paramName1/paramName2',
      params: []
    },
```
y en el componente que deseemos utilizar dichos query params:
```javascript=
in: {},
out: {},
params: {
    paramName1: 'paramName1',
    paramName2: 'paramName2'
    }
```
