> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/sa5-cache/cache/v4.md).

# Cache Setup v4

{% hint style="info" %}
This setup guide is the **legacy** documentation for SA4. 
{% endhint %}

## Usage Notes v4 <a href="#usage-notes" id="usage-notes"></a>

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)  &#x20;

## Setup the Cache

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

{% code overflow="wrap" %}

```javascript
<script type="module">
import { WfuCache, WfuCacheItem } from 'https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.4.0/src/modules/webflow-cache.min.js'; 

$(function() {
  const cache = new WfuCache({
    val: {
      myData: new WfuCacheItem({
        store: "sessionStorage", 
        name: "myData", 
        updateFnAsync: getMyDataAsync   
      })
    }
  });
});
</script> 
```

{% endcode %}

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

### Access your Data&#x20;

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. &#x20;

```javascript
// 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  <a href="#getting-started-nocode" id="getting-started-nocode"></a>

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

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

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

### STEP 1 - Add the Library <a href="#step-1---add-the-library" id="step-1---add-the-library"></a>

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