sessionStorage/localStorage is not defined

Hi,

This is linked to: https://www.ads-software.com/support/topic/non-cacheable-components-elements-in-amp/

I have been able to show info based on Milind suggestions using src in AMP List. I wanted to use AMP script because I need to use the same data again and trying to avoid another call. I have been successful in showing the data when the script calls the URL directly like this:

<amp-script id="dataFunctions" script="local-script" nodom></amp-script>
<script id="local-script" type="text/plain" target="amp-script">
  
  function getRemoteData() {
    
       return fetch('https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>').then(resp => resp.json());
    
  }
  exportFunction('getRemoteData', getRemoteData);
  
</script>
  <amp-list
  id="amp-list"
  width="auto"
  height="100"
  layout="fixed-height"
  src="amp-script:dataFunctions.getRemoteData"
>
  <template type="amp-mustache">
    <div>
      <a href="{{url}}">{{title}}</a>
    </div>
  </template>
</amp-list>

To reuse the data, I want to store in local storage with either sessionStorage or localStorage. Unfortunately, I am getting error using these functions that they are not defined. Here’s the script I am using:

<?php $script_var = 'region_data'.$post->ID; ?>
<amp-script id="dataFunctions" script="local-script" nodom></amp-script>
<script id="local-script" type="text/plain" target="amp-script">
  
  function getRemoteData() {
    if(sessionStorage.getItem(<?php echo $script_var; ?>) === null) {
        var region_data = fetch('https://www.flixwatch.co/stagin/region-data/?post_id=<?php echo $post->ID; ?>').then(resp => resp.json());
        sessionStorage.setItem(<?php echo $script_var; ?>, region_data);
        console.log(region_data);
        return region_data;
    } else {
        var region_data = sessionStorage.getItem(<?php echo $script_var; ?>);
        console.log(region_data);
        return region_data;
    }
  }
  exportFunction('getRemoteData', getRemoteData);
  
</script>
  <amp-list
  id="amp-list"
  width="auto"
  height="100"
  layout="fixed-height"
  src="amp-script:dataFunctions.getRemoteData"
>
  <template type="amp-mustache">
    <div>
      <a href="{{url}}">{{title}}</a>
    </div>
  </template>
</amp-list>