Data Caching ❺

Cache retrieved data for quick access.

This is an advanced feature which requires an understanding of JavaScript development.

Overview

Sites are better with dynamic data, but as Webflow does not provide for server-side development, that data often needs to come from outside sources and endpoints. How do you make that as efficient as possible?

You combine techniques like caching, asynchronous loading, callbacks, and lazy loading to request, store, and access that data.

Sygnal's Caching library supports;

• Caching of retrieved user data in a webStorage-managed map.

• Lazy-loading. The data is not retrieved until it's first requested.

• Fully async execution. 100% entirely non-blocking.

• Defining your cached values, and the async functions that calculate or determine them.

Then when you request your value, the lib takes care of checking the cache first. If the value has not been calculated or retrieved, it calls your custom code calculation function to resolve it.

Use Cases

• Retrieve data from another page on your site

• Retrieve data from a page on another site

• Retrieve data from an API

• Perform a time-consuming calculation

Limitations

Currently it is a simple session-level cache, meaning that the data will only be stored until the tab is closed. There is no configuration ability at present for specific cache timeouts.

Future Plans

• Multiple cached items with a single cache handler. Added

• Cache choice and lifetime configuration, using sessionStorage, localStorage, or cookies Added

• Support for eager or lazy loading, by cached data item ( all will be asynchronous ).

  • Eager loading may be considered later

• Triggering events on load, to allow other processes to happen

• Handle retrieval failure cases.

Possible support for specialized, source-aware and content-aware data adapters;

These would be part of SA5 Data;

• Retrieving data from Google Docs, Sheets, or AirTable

• Retrieving specific element content from another webpage

• JSON API calls

We're also considering approaches on how the adapter configurations and data-binding could potentially support simple NO-CODE situations such as value-binding.

Usage Notes

Setup involves three parts;

1. Setting up the cache, and defining your cached values

2. Creating custom functions for to calculate your defined values, which is called when the uncached data needs to be created.

3. Cache retrieval, which retrieves the data either from the cache (if available) for generates it (if needed)

Setup involves defining your cached values, and the async functions that calculate or determine them.

Then when you request your value, the lib takes care of checking the cache first. If the value has not been calculated or retrieved, it calls your custom code calculation function to resolve it.

Setup the Cache

ALPHA PRE-RELEASE. Not advised for production use. Use v4 for production sites.

Place this code in your site or page level /head code,

<!-- Sygnal Attributes 5 | Cache -->
<script src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/webflow-cache.js"></script>
<script src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/webflow-cache/cache-item.js"></script>

<script>
const init = () => { 

  const cache = new WfuCache({
    val: {
      myData: new WfuCacheItem({
        name: "myData", 
        store: "sessionStorage", 
        updateFnAsync: getMyDataAsync   
      })
    }
  });

}

document.addEventListener("DOMContentLoaded", init)
</script>

Define as many cached values as you want, giving them each a unique name. These are defined beneath val, as properties.

Access your Data

When you need to retrieve that value, call cache.getAsync(). In the .then(), utilize your data. That code will be executed as soon as the data is available. This will be effectively immediate if the data is already cached.

// Retrieve a desired value
cache.getAsync("myData")
  .then(x => {
   
    // Do something with your data
    console.log("Retrieved", x); 
          
  }); 

Configure your Data Retrieval functions

This is your custom code async function for determining the value, if it's not already in the cache.

// Your asynchronous data-capture function 
async function getMyDataAsync() {

  // Get or create your data 
  var data = "HERE'S MY DATA"; 
  
  return data; 
}