Las variables guardan el estado de una página o de todo un sitio: la pestaña actual, un término de búsqueda, filtros, un carrito. Los enlaces de datos las leen como vars.name, y los flujos de trabajo las cambian con Set variable y Reset variable.
Crear una variable
Abre el espacio de trabajo Data y agrega una variable, o presiona Create variable desde un enlace de datos. Elige un nombre (camelCase), un tipo y un valor por defecto. El tipo es uno de string, number, boolean, object o array.
De página o de sitio
- Las variables de página existen en una página y se reinician cuando el visitante sale de ella.
- Las variables de sitio las comparten todas las páginas del sitio.
- Si las dos tienen el mismo nombre, la variable de página gana en su página.
Persistencia
| Persistencia | Se guarda en | Sirve para |
|---|---|---|
none | solo en memoria | estado de la interfaz, como un menú abierto |
url | el query string | búsquedas y filtros que la gente puede compartir o guardar en favoritos |
local | localStorage | un carrito o preferencias que sobreviven entre visitas |
session | sessionStorage | estado solo para la pestaña actual |
// A search variable kept in the URL (?search=…)
{ "name": "search", "type": "string", "default": "", "persist": "url" }
// A cart kept in localStorage across visits
{ "name": "cart", "type": "array", "default": [], "persist": "local" }
Valores anidados
Define un solo campo dentro de una variable de tipo objeto con una ruta con puntos, como filters.category. Los inputs también se pueden enlazar en ambos sentidos a una ruta: vars.filters.category.
Siguiente: pasa variables a las consultas para que los datos se vuelvan a obtener cuando cambien.