data persistence across elements

Question

suppose I want to have a data provider element for my user, like

<user-data-provider user-data="{{data}}"></user-data-provider>

which sends an ajax request and gets the logged in user.

Suppose I want to access my user data in different pages, and I add this tag to wherever I need, but the problem is, every time the browser sees this tag, makes an ajax again and I have to wait until data is fetched!

I know I can make a variable in my main page and pass it along child pages, but that seems like overkill to me !

how can I persist user data across different pages and part of my app?

thank you in advance

Answer 1

There are different ways to do this.

1. You can use use a monostate pattern
2. You can have one instance of your user-data-provider element in your root element or index.html and use iron-signals to transmit the data to all other elements that want to consume it
3. You can use iron-meta to have global state
4. Use an external state management framework (i.e. redux). There is a polymer wrapper for it: polymer-redux

I would recommend using an external state mangement framework such as redux.

Some of the solutions are shown here:

Polymer 1.0 Global Variables