fix(taglist): refreshing page set all digets to `sha256:e3b0c44298...` due to missing seesion cache (#337)

fix #337

package.json

@@ -1,6 +1,6 @@
 {
   "name": "docker-registry-ui",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "type": "module",
   "scripts": {
     "format": "npm run format-html && npm run format-js && npm run format-riot",

src/scripts/cache-request.js

@@ -17,16 +17,20 @@ export const getFromCache = (method, url) => {
     return;
   }
   try {
-    return sessionStorage.getItem(sha256);
+    return {
+      responseText: sessionStorage.getItem(`${sha256}/responseText`),
+      dockerContentdigest: sessionStorage.getItem(`${sha256}/dockerContentdigest`),
+    };
   } catch (e) {}
 };
 
-export const setCache = (method, url, responseText) => {
+export const setCache = (method, url, { responseText, dockerContentdigest }) => {
   const sha256 = getSha256(method, url);
   if (!sha256) {
     return;
   }
   try {
-    sessionStorage.setItem(sha256, responseText);
+    sessionStorage.setItem(`${sha256}/responseText`, responseText);
+    sessionStorage.setItem(`${sha256}/dockerContentdigest`, dockerContentdigest);
   } catch (e) {}
 };

src/scripts/http.js

@@ -29,19 +29,23 @@ export class Http {
   }
 
   getContentDigest(cb) {
-    if (this.oReq.hasHeader('Docker-Content-Digest')) {
+    if (this.cache?.dockerContentdigest) {
+      cb(this.cache.dockerContentdigest);
+    } else if (this.oReq.hasHeader('Docker-Content-Digest')) {
       // Same origin or advanced CORS headers set:
       // 'Access-Control-Expose-Headers: Docker-Content-Digest'
       cb(this.oReq.getResponseHeader('Docker-Content-Digest'));
     } else if (window.crypto && window.TextEncoder) {
-      crypto.subtle.digest('SHA-256', new TextEncoder().encode(this.oReq.responseText)).then(function (buffer) {
+      crypto.subtle
-        cb(
+        .digest('SHA-256', new TextEncoder().encode(this.oReq.responseText || this.cache?.responseText))
-          'sha256:' +
+        .then(function (buffer) {
-            Array.from(new Uint8Array(buffer))
+          cb(
-              .map((byte) => byte.toString(16).padStart(2, '0'))
+            'sha256:' +
-              .join('')
+              Array.from(new Uint8Array(buffer))
-        );
+                .map((byte) => byte.toString(16).padStart(2, '0'))
-      });
+                .join('')
+          );
+        });
     } else {
       // IE and old Edge
       // simply do not call the callback and skip the setup downstream
@@ -80,7 +84,11 @@ export class Http {
               req.send();
             });
           } else {
-            this.status === 200 && setCache(self._method, self._url, this.responseText);
+            this.status === 200 &&
+              setCache(self._method, self._url, {
+                responseText: this.responseText,
+                dockerContentdigest: this.getResponseHeader('Docker-Content-Digest'),
+              });
             f.bind(this)();
           }
         });
@@ -119,9 +127,10 @@ export class Http {
   }
 
   send() {
-    const responseText = getFromCache(this._method, this._url);
+    const cache = getFromCache(this._method, this._url);
-    if (responseText) {
+    if (cache && cache.responseText) {
-      return this._events['loadend'].bind({ status: 200, responseText })();
+      this.cache = cache;
+      return this._events['loadend'].bind({ status: 200, responseText: cache.responseText })();
     }
     this.oReq.send();
   }