fix: recover stored value on init

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

Hide file tree

Showing 3 changed files with 83 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,43 @@ 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);
+ });
+
+ suite('without default value', () => {
+ setup(async () => {
+ controller = new LocalStorageController(element, 'test-key');
+ element.controllers.push(controller);
+ await element.updateComplete;
+ });
+
+ test('initialises to saved value', () => {
+ 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]');
+ });
+
+ suite('with default value', () => {
+ setup(async () => {
+ controller = new LocalStorageController(element, 'test-key', [5, 6]);
+ element.controllers.push(controller);
+ await element.updateComplete;
+ });
+
+ test('initialises to saved value', () => {
+ 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
@@ -105,5 +105,48 @@ suite('SessionStorageController', () => {
  assert.equal(element.shadowRoot!.textContent, '[5,6]');
  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);
+ });
+
+ suite('without default value', () => {
+ setup(async () => {
+ controller = new SessionStorageController(element, 'test-key');
+ element.controllers.push(controller);
+ await element.updateComplete;
+ });
+
+ test('initialises to saved value', () => {
+ 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]');
+ });
+
+ suite('with default value', () => {
+ setup(async () => {
+ controller = new SessionStorageController(
+ element,
+ 'test-key',
+ [5, 6]
+ );
+ element.controllers.push(controller);
+ await element.updateComplete;
+ });
+
+ test('initialises to saved value', () => {
+ 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]');
+ });
+ });
+ });
+ });
  });
 });