How to create static object in polymer

Question

I have the following use case.

The root file in my web project is index.html. I want to create an object that stores user info such that it can be accessed from any polymer web component in the project, without ever passing it to any web component explicitly. Can this be done? This is similar to the Singleton methodology of many object oriented programming language. Thank you.

Answer 1

The iron-meta element is designed for this, but the element basically just saves stuff into memory. Just look at what the element does:

Polymer.IronMeta.getIronMeta = function getIronMeta() {
   if (singleton === null) {
     singleton = new Polymer.IronMeta();
   }
   return singleton;
 };

So I would just go ahead with the already suggested solution:

 window.myData = {};

Answer 2

If you want any/all components to be able to access the same data then you have to make it global:

window.myData = {};

But this is such a bad idea on so many levels.

This ties all of your components to this data structure and location. No one else and no other app can use these components unless they are willing to manage the exact same data structure.

Instead you need to pass the required data into each component. Yes, that is more work, but it allows the component to be used any where.

If the component needs to get the EXACT same data every time in every condition, then you have the component gather the data.

If the data needs to be able to come from a different endpoint, based on the application, then you need to provide the component with the ability to have its URL defined. This is much like the <img> tag. it has the src property. Sure the <img> tag only displays images and always displays images but the user of the <img> tag can set the src attribute or property to tell the tag where to get the data for the image.