Cache Setup v4

Cache retrieved data for quick access.

This setup guide is the legacy documentation for SA4.

Usage Notes v4

Setup involves three parts;

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

2. A custom function 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 the Cache

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

<script type="module">
import { WfuCache, WfuCacheItem } from 'https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/src/modules/webflow-cache.min.js'; 

$(function() {
  const cache = new WfuCache({
    val: {
      myData: new WfuCacheItem({
        store: "sessionStorage", 
        name: "myData", 
        updateFnAsync: getMyDataAsync   
      })
    }
  });
});
</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(), you can use your data how you want as soon as it's available.

// Some code
$(function() {
  
  // Cache setup ( code example above ) 
  // ... 
  
  // Retrieve a desired value
  // in this example, we want the value on page load, asynchronously 
  cache.getAsync("myData")
    .then(x => {
    
      // Do something with your data
      console.log(x); 
      
    }); 
      
}); 

Configure your Data Retrieval functions

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

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

  // Get or create your data
  // ...
  
  return data; 
}

STEP 1 - Add the Library

See above, and the feature-specific sub pages for details.