feat: add per session caching

api-text.js

@@ -18,26 +18,31 @@ class ApiText extends HTMLElement {
 
   async connectedCallback() {
     if (this.shadowRoot) return;
-    const data = { ...(await this.data) };
     let shadowroot = this.attachShadow({ mode: 'open' })
     let slot = document.createElement('slot')
     shadowroot.appendChild(slot)
 
+    const data = { ...(await this.data) };
     const loading = this.querySelector('.loading')
     const content = this.querySelector('.content')
     const value = data['content']
-
-    if (!value) {
-      loading.style.display = 'none'
-      content.style.display = 'none'
+    const cacheKey = this.url || 'api-text-cache'
+    const cache = sessionStorage?.getItem(cacheKey) || loading.innerHTML
+    const loadText = (string) => {
+      if (string && content.style.opacity !== '1') {
+        loading.style.opacity = '0'
+        loading.style.display = 'none'
+        content.style.opacity = '1'
+        content.innerHTML = value
+      } else if (string && content.style.opacity === '1') {
+        content.innerHTML = value
+      }
     }
 
-    if (value) {
-      loading.style.opacity = '0'
-      loading.style.display = 'none'
-      content.style.opacity = '1'
-      content.innerHTML = value
-    }
+    loadText(cache);
+    loadText(value);
+
+    sessionStorage?.setItem(cacheKey, JSON.stringify(value))
   }
 
   get data() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdransf/api-text",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A web component to load text from an API and display it.",
   "main": "api-text.js",
   "repository": {