fix: [#1181] Adds support for defining keys to the Storage class used by the properties Window.localStorage and Window.sessionStorage

* fix: [#1181] Refactor storage mock

* chore: [#1181] Removes the classes LocalStorage and SessionStorage as Storage is the correct class to use

* chore: [#1181] Removes the classes LocalStorage and SessionStorage as Storage is the correct class to use

---------

Co-authored-by: frankdiwang <[email protected]>
Co-authored-by: David Ortner <[email protected]>

Author: 3 people

packages/happy-dom/src/storage/Storage.ts

@@ -4,15 +4,13 @@
  * @see https://developer.mozilla.org/en-US/docs/Web/API/Storage
  */
 export default class Storage {
-	#store: { [k: string]: string } = {};
-
 	/**
 	 * Returns length.
 	 *
 	 * @returns Length.
 	 */
 	public get length(): number {
-		return Object.keys(this.#store).length;
+		return Object.keys(this).length;
 	}
 
 	/**
@@ -22,7 +20,7 @@ export default class Storage {
 	 * @returns Name.
 	 */
 	public key(index: number): string {
-		const name = Object.keys(this.#store)[index];
+		const name = Object.keys(this)[index];
 		return name === undefined ? null : name;
 	}
 
@@ -33,7 +31,7 @@ export default class Storage {
 	 * @param item Item.
 	 */
 	public setItem(name: string, item: string): void {
-		this.#store[name] = item;
+		this[name] = item;
 	}
 
 	/**
@@ -43,7 +41,7 @@ export default class Storage {
 	 * @returns Item.
 	 */
 	public getItem(name: string): string {
-		return this.#store[name] === undefined ? null : this.#store[name];
+		return this[name] === undefined ? null : this[name];
 	}
 
 	/**
@@ -52,13 +50,16 @@ export default class Storage {
 	 * @param name Name.
 	 */
 	public removeItem(name: string): void {
-		delete this.#store[name];
+		delete this[name];
 	}
 
 	/**
 	 * Clears storage.
 	 */
 	public clear(): void {
-		this.#store = {};
+		const keys = Object.keys(this);
+		for (const key of keys) {
+			delete this[key];
+		}
 	}
 }

packages/happy-dom/test/storage/Storage.test.ts

@@ -15,6 +15,8 @@ describe('Storage', () => {
 			expect(storage.length).toBe(2);
 			storage.setItem('key3', 'value3');
 			expect(storage.length).toBe(3);
+			storage['key4'] = 'value4';
+			expect(storage.length).toBe(4);
 		});
 	});
 
@@ -34,6 +36,8 @@ describe('Storage', () => {
 			storage.setItem('key2', 'value2');
 			expect(storage.getItem('key1')).toBe('value1');
 			expect(storage.getItem('key2')).toBe('value2');
+			storage['key3'] = 'value3';
+			expect(storage.getItem('key3')).toBe('value3');
 		});
 	});
 
@@ -43,6 +47,10 @@ describe('Storage', () => {
 			storage.setItem('key2', 'value2');
 			expect(storage.getItem('key1')).toBe('value1');
 			expect(storage.getItem('key2')).toBe('value2');
+			expect(storage['key1']).toBe('value1');
+			expect(storage['key2']).toBe('value2');
+			storage['key1'] = 'value3';
+			expect(storage.getItem('key1')).toBe('value3');
 		});
 	});
 
@@ -54,6 +62,21 @@ describe('Storage', () => {
 			expect(storage.length).toBe(1);
 			expect(storage.getItem('key1')).toBe('value1');
 			expect(storage.getItem('key2')).toBe(null);
+			expect(storage['key1']).toBe('value1');
+			expect(storage['key2']).toBe(undefined);
+		});
+	});
+
+	describe('clear()', () => {
+		it('Clears storage.', () => {
+			storage.setItem('key1', 'value1');
+			storage.setItem('key2', 'value2');
+			storage.clear();
+			expect(storage.length).toBe(0);
+			expect(storage.getItem('key1')).toBe(null);
+			expect(storage.getItem('key2')).toBe(null);
+			expect(storage['key1']).toBe(undefined);
+			expect(storage['key2']).toBe(undefined);
 		});
 	});
 });