# 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@4.11/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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-detect/geo/v4.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.