fix: recover stored value on init (#26)

Closes #25
43081j · Feb 5, 2024 · 034fa9b · 034fa9b
1 parent 326ddeb
commit 034fa9b
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 0 deletions.
diff --git a/src/_internal/storage.ts b/src/_internal/storage.ts
@@ -45,6 +45,7 @@ export abstract class StorageController<T> implements ReactiveController {
     this.__storage = storage;
     this.__key = key;
     this.__initialValue = defaultValue;
+    this.__value = this.__readValueFromStorage();
 
     host.addController(this);
   }

diff --git a/src/test/controllers/localStorage_test.ts b/src/test/controllers/localStorage_test.ts
@@ -103,4 +103,35 @@ suite('LocalStorageController', () => {
       assert.is(storageValue, '[5,6]');
     });
   });
+
+  suite('with saved value', () => {
+    setup(() => {
+      window.localStorage.setItem('test-key', JSON.stringify([7, 8]));
+      element = document.createElement('test-element') as TestElement;
+      element.template = () => html`${JSON.stringify(controller.value)}`;
+      document.body.appendChild(element);
+    });
+
+    test('initialises to saved value', async () => {
+      controller = new LocalStorageController(element, 'test-key');
+      element.controllers.push(controller);
+      await element.updateComplete;
+
+      const storageValue = window.localStorage.getItem('test-key');
+      assert.equal(controller.value, [7, 8]);
+      assert.equal(element.shadowRoot!.textContent, '[7,8]');
+      assert.is(storageValue, '[7,8]');
+    });
+
+    test('ignore default value and use saved value', async () => {
+      controller = new LocalStorageController(element, 'test-key', [9, 10]);
+      element.controllers.push(controller);
+      await element.updateComplete;
+
+      const storageValue = window.localStorage.getItem('test-key');
+      assert.equal(controller.value, [7, 8]);
+      assert.equal(element.shadowRoot!.textContent, '[7,8]');
+      assert.is(storageValue, '[7,8]');
+    });
+  });
 });
diff --git a/src/test/controllers/sessionStorage_test.ts b/src/test/controllers/sessionStorage_test.ts
@@ -106,4 +106,35 @@ suite('SessionStorageController', () => {
       assert.is(storageValue, '[5,6]');
     });
   });
+
+  suite('with saved value', () => {
+    setup(() => {
+      window.sessionStorage.setItem('test-key', JSON.stringify([7, 8]));
+      element = document.createElement('test-element') as TestElement;
+      element.template = () => html`${JSON.stringify(controller.value)}`;
+      document.body.appendChild(element);
+    });
+
+    test('initialises to saved value', async () => {
+      controller = new SessionStorageController(element, 'test-key');
+      element.controllers.push(controller);
+      await element.updateComplete;
+
+      const storageValue = window.sessionStorage.getItem('test-key');
+      assert.equal(controller.value, [7, 8]);
+      assert.equal(element.shadowRoot!.textContent, '[7,8]');
+      assert.is(storageValue, '[7,8]');
+    });
+
+    test('ignore default value and use saved value', async () => {
+      controller = new SessionStorageController(element, 'test-key', [9, 10]);
+      element.controllers.push(controller);
+      await element.updateComplete;
+
+      const storageValue = window.sessionStorage.getItem('test-key');
+      assert.equal(controller.value, [7, 8]);
+      assert.equal(element.shadowRoot!.textContent, '[7,8]');
+      assert.is(storageValue, '[7,8]');
+    });
+  });
 });