Proper method to set a global value shared within Shopify theme files

[DeeDee-TDY]

I am a developer for multiple corporate stores under the Shopify Plus Enterprise Platform plan. I have an API that, for efficiency, I would like to call only once (per store/customer session) and use the response to set a global value that is readable from the following seven (Dawn 11.0) Section files:
1. collage,
2. featured-collection,
3. featured-product,
4. main-collection-product-grid,
5. main-product,
6. predictive-search,
7. related-products.

I will modify content in these section files based on the single API result value. What is the proper method to set a global variable, MetaField, or other such shared value within Shopify theme files?

[Liam]

Hi DeeDee-TDY,

Have you looked into App-data metafields? These would be available on all sections/ pages though - are you looking to ensure that the metafields are locked to only the specific sections that you have listed in your post?

[DeeDee-TDY]

re: are you looking to ensure that the metafields are locked to only the specific sections?

no, this is not necessary in my case.

So, Are you suggesting to write a Shopify app program that calls the 3rd party API and set the metafield value from the app (which then can be ready by liquid sections)? I have written some checkout UI extension apps but am fairly new to Shopify - what type of Shopify app [framework] would you suggest to start with for something like this (i.e. runs prior to pages loaded)?

[DeeDee-TDY · Accepted solution]

I found a (non-Shopify) storage solution that works across Shopify liquid files for a case where I am trying to call and read a value only once per domain session (from an external API: apiCallResponse.country_code) and store this value to read from multiple liquid files.
I use the browser storage (i.e., localStorage object) to set the value like this:

    localStorage.setItem('country_code', apiResponse.country_code);

And then read the stored value from each liquid section as needed like this:

    country_code = localStorage.getItem('country_code');

This works for sharing data across liquid files - as long as you're OK with [modern] browser storage, saved at each domain session.