@cocreate/local-storage 1.16.4 → 1.16.5

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [1.16.5](https://github.com/CoCreate-app/CoCreate-local-storage/compare/v1.16.4...v1.16.5) (2026-03-05)
+
+
+### Bug Fixes
+
+* storage support for local and session storage, added fallback to Map for unsupported browsers ([9774762](https://github.com/CoCreate-app/CoCreate-local-storage/commit/9774762ed66298adaec453804835211930269519))
+
 ## [1.16.4](https://github.com/CoCreate-app/CoCreate-local-storage/compare/v1.16.3...v1.16.4) (2026-02-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/local-storage",
-  "version": "1.16.4",
+  "version": "1.16.5",
   "description": "A Simple component similar to CoCreate-input & CoCreate-fetch which Save and fetch data for inputs, textarea, selects from localstorage. Easily configured using HTML5 attributes and/or JavaScript API",
   "keywords": [
     "local-storage",

package/src/index.js

@@ -1,247 +1,313 @@
 import Observer from "@cocreate/observer";
 import Actions from "@cocreate/actions";
 
-const CoCreateLocalStorage = {
-	support: true,
-	storage: new Map(),
-
-	init: function () {
-		const self = this;
-		var elements = document.querySelectorAll(
-			"[localstorage-set], [localstorage-get]"
-		);
-		this.initElements(elements);
-
-		window.addEventListener("storage", function (e) {
-			elements = document.querySelectorAll(
-				`[localstorage-get="${e.key}"]`
-			);
-			for (let element of elements) {
-				// TODO: return if localstorage-query, etc...
-				// - Decide how best to handle, considering localstorage is also handled by event.
-				if (
-					element.hasAttribute("localstorage-attribute") ||
-					element.hasAttribute("localstorage-value") ||
-					element.hasAttribute("localstorage-key")
-				)
-					return;
-				let value = self.getItem(e.key);
-				if (value != null) {
-					element.setValue(value);
-				}
-			}
-		});
-	},
-
-	/**
-	 * Initializes a collection of elements.
-	 * @param {Array<Element>} elements - An array of elements to be initialized.
-	 */
-	initElements: function (elements) {
-		for (let element of elements) this.initElement(element);
-	},
-
-	/**
-	 * Initializes a single element.
-	 * @param {Element} element - The element to initialize. This function expects an 'Element' type.
-	 */
-	initElement: function (element) {
-		let value = this.getItem(element);
-		if (value) element.setValue(value);
-		else {
-			let inputEvent = new CustomEvent("input", {
-				bubbles: true
-			});
-
-			Object.defineProperty(inputEvent, "target", {
-				writable: false,
-				value: element
-			});
-			element.dispatchEvent(inputEvent);
-		}
-		element.addEventListener("input", (e) => {
-			let isRealtime = element.getAttribute("realtime");
-			// Returns if realtime false.
-			if (!isRealtime && isRealtime === "false") return;
-
-			let key = e.target.getAttribute("localstorage-set");
-			// Set the key and value in the localstorage.
-			if (key) this.setItem(key, e.target.value);
-
-			let elements = document.querySelectorAll(
-				`[localstorage-get="${key}"]`
-			);
-			for (let el of elements) {
-				if (el != element) {
-					let value = this.getItem(key);
-					// Set the value of the element.
-					if (value != null) {
-						el.setValue(value);
-					}
-				}
-			}
-		});
-	},
-
-	/**
-	 * @param key
-	 *
-	 * @return { Mixed } The value associated with the key or undefined if not found. Note that this will be returned as a string if the key is an array
-	 */
-	getItem: function (key) {
-		// Returns the value of the key in the storage.
-		if (this.support) return window.localStorage.getItem(key);
-		else return this.storage.get(key);
-	},
-
-	/**
-	 * @param key - key name to store the value under
-	 * @param value - value to store
-	 */
-	setItem: function (key, value) {
-		try {
-			if (this.support) {
-				const oldValue = localStorage.getItem(key);
-
-				window.localStorage.setItem(key, value);
-
-				const keys = [
-					"organization_id",
-					"user_id",
-					"clientId",
-					"session_id"
-				];
-				if (keys.includes(key)) {
-					const updateEvent = new CustomEvent("updateAttributes", {
-						detail: { key, newValue: value, oldValue }
-					});
-					window.dispatchEvent(updateEvent);
-				}
-			} else this.storage.set(key, value);
-		} catch (error) {
-			if (
-				error instanceof DOMException &&
-				(error.code === 22 ||
-					error.code === 1014 ||
-					error.name === "QuotaExceededError" ||
-					error.name === "NS_ERROR_DOM_QUOTA_REACHED")
-			) {
-				// TODO: create a fallback method, perhaps setting in indexeddb if above a specific size
-				console.log(
-					"Local storage limit exceeded. Falling back to IndexedDB."
-				);
-			} else {
-				console.error("Error setting item:", error);
-			}
-		}
-	},
-
-	/**
-	 * @param key - The key name to delete from the storage
-	 */
-	removeItem: function (key) {
-		// Removes an item from the storage.
-		if (this.support) window.localStorage.removeItem(key);
-		else this.storage.delete(key);
-	},
-
-	/**
-	 * @param action
-	 *
-	 * @return { undefined } No return
-	 */
-	runStorage: async function (action) {
-		const form = action.form;
-		// If the form is not a form return false.
-		if (!form) return;
-
-		let set_els = form.querySelectorAll("[localstorage-set]");
-		for (let el of set_els) {
-			let key = el.getAttribute("localstorage-set");
-			let value = await el.getValue();
-			// Sets the value of an item.
-			if (value && key) {
-				this.setItem(key, value);
-			}
-		}
-		let get_els = form.querySelectorAll("[localstorage-get]");
-		for (let el of get_els) {
-			let key = el.getAttribute("localstorage-get");
-			// If key is not set return false.
-			if (!key) return;
-			let value = this.getItem(key);
-			// Set the value of the element.
-			if (value != null) {
-				el.setValue(value);
-			}
-		}
-		let remove_els = form.querySelectorAll("[localstorage-remove]");
-		for (let el of remove_els) {
-			el.setValue("");
-			let key = el.getAttribute("localstorage-remove");
-			// Removes an item from the list.
-			if (key) {
-				this.removeItem(key);
-			}
-		}
-
-		action.element.dispatchEvent(
-			new CustomEvent("localStorage", {
-				detail: {}
-			})
-		);
-	},
-
-	checkSupport: function () {
-		// Check if the browser supports localStorage.
-		if (!("localStorage" in window)) {
-			console.log("This browser doesn't support localStorage.");
-			this.support = false;
-		} else {
-			try {
-				let test = window.localStorage.getItem("test");
-				// If the CoCreateConfig. localStorage is false this method will set support to false.
-				if (window.CoCreateConfig)
-					if (window.CoCreateConfig.localStorage === false)
-						// If the server supports local storage
-						this.support = false;
-			} catch (e) {
-				this.support = false;
-			} finally {
-				// Initialize the component. If support is enabled the method init is called.
-				if (this.support) this.init();
-			}
-		}
-	}
+let support = true;
+const storage = new Map();
+
+function init() {
+    var elements = document.querySelectorAll(
+        "[localstorage-set], [localstorage-get], [sessionstorage-set], [sessionstorage-get]"
+    );
+    initElements(elements);
+
+    window.addEventListener("storage", function (e) {
+        // Determine which storage type triggered the event
+        const type = e.storageArea === window.sessionStorage ? "sessionstorage" : "localstorage";
+        
+        elements = document.querySelectorAll(
+            `[${type}-get="${e.key}"]`
+        );
+        for (let element of elements) {
+            // TODO: Decide how best to handle considering storage is also handled by event.
+            if (
+                element.hasAttribute(`${type}-attribute`) ||
+                element.hasAttribute(`${type}-value`) ||
+                element.hasAttribute(`${type}-key`)
+            )
+                return;
+            let value = getItem(e.key, type);
+            if (value != null) {
+                element.setValue(value);
+            }
+        }
+    });
+}
+
+/**
+ * Initializes a collection of elements.
+ * @param {Array<Element>} elements - An array of elements to be initialized.
+ */
+function initElements(elements) {
+    for (let element of elements) initElement(element);
+}
+
+/**
+ * Initializes a single element.
+ * @param {Element} element - The element to initialize. This function expects an 'Element' type.
+ */
+function initElement(element) {
+    const types = ["localstorage", "sessionstorage"];
+    let hasValue = false;
+
+    for (let type of types) {
+        let key = element.getAttribute(`${type}-get`) || element.getAttribute(`${type}-set`);
+        if (!key) continue;
+        
+        let value = getItem(key, type);
+        if (value) {
+            element.setValue(value);
+            hasValue = true;
+        }
+    }
+    
+    if (!hasValue) {
+        let inputEvent = new CustomEvent("input", {
+            bubbles: true
+        });
+
+        Object.defineProperty(inputEvent, "target", {
+            writable: false,
+            value: element
+        });
+        element.dispatchEvent(inputEvent);
+    }
+    
+    element.addEventListener("input", (e) => {
+        let isRealtime = element.getAttribute("realtime");
+        // Returns if realtime false.
+        if (!isRealtime && isRealtime === "false") return;
+
+        for (let type of types) {
+            let currentKey = e.target.getAttribute(`${type}-set`);
+            if (!currentKey) continue;
+            
+            // Set the key and value in the respective storage.
+            setItem(currentKey, e.target.value, type);
+
+            let elements = document.querySelectorAll(
+                `[${type}-get="${currentKey}"]`
+            );
+            for (let el of elements) {
+                if (el != element) {
+                    let value = getItem(currentKey, type);
+                    // Set the value of the element.
+                    if (value != null) {
+                        el.setValue(value);
+                    }
+                }
+            }
+        }
+    });
+}
+
+/**
+ * @param key
+ * @param type - 'localstorage' or 'sessionstorage'
+ * @return { Mixed } The value associated with the key or undefined if not found.
+ */
+function getItem(key, type = "localstorage") {
+    if (support) {
+        return type === "sessionstorage" ? window.sessionStorage.getItem(key) : window.localStorage.getItem(key);
+    } else {
+        return storage.get(`${type}-${key}`);
+    }
+}
+
+/**
+ * @param key - key name to store the value under
+ * @param value - value to store
+ * @param type - 'localstorage' or 'sessionstorage'
+ */
+function setItem(key, value, type = "localstorage") {
+    try {
+        if (support) {
+            const storageObj = type === "sessionstorage" ? window.sessionStorage : window.localStorage;
+            const oldValue = storageObj.getItem(key);
+
+            storageObj.setItem(key, value);
+
+            const keys = [
+                "organization_id",
+                "user_id",
+                "clientId",
+                "session_id"
+            ];
+            if (keys.includes(key)) {
+                const updateEvent = new CustomEvent("updateAttributes", {
+                    detail: { key, newValue: value, oldValue, type }
+                });
+                window.dispatchEvent(updateEvent);
+            }
+        } else {
+            storage.set(`${type}-${key}`, value);
+        }
+    } catch (error) {
+        if (
+            error instanceof DOMException &&
+            (error.code === 22 ||
+                error.code === 1014 ||
+                error.name === "QuotaExceededError" ||
+                error.name === "NS_ERROR_DOM_QUOTA_REACHED")
+        ) {
+            console.log(
+                "Storage limit exceeded. Falling back to Map."
+            );
+        } else {
+            console.error("Error setting item:", error);
+        }
+    }
+}
+
+/**
+ * @param key - The key name to delete from the storage
+ * @param type - 'localstorage' or 'sessionstorage'
+ */
+function removeItem(key, type = "localstorage") {
+    if (support) {
+        if (type === "sessionstorage") window.sessionStorage.removeItem(key);
+        else window.localStorage.removeItem(key);
+    } else {
+        storage.delete(`${type}-${key}`);
+    }
+}
+
+/**
+ * @param action
+ *
+ * @return { undefined } No return
+ */
+async function runStorage(action) {
+    const form = action.form;
+    if (!form) return;
+
+    const types = ["localstorage", "sessionstorage"];
+
+    for (let type of types) {
+        let set_els = form.querySelectorAll(`[${type}-set]`);
+        for (let el of set_els) {
+            let key = el.getAttribute(`${type}-set`);
+            let value = await el.getValue();
+            if (value && key) {
+                setItem(key, value, type);
+            }
+        }
+        
+        let get_els = form.querySelectorAll(`[${type}-get]`);
+        for (let el of get_els) {
+            let key = el.getAttribute(`${type}-get`);
+            if (!key) continue; 
+            let value = getItem(key, type);
+            if (value != null) {
+                el.setValue(value);
+            }
+        }
+        
+        let remove_els = form.querySelectorAll(`[${type}-remove]`);
+        for (let el of remove_els) {
+            el.setValue("");
+            let key = el.getAttribute(`${type}-remove`);
+            if (key) {
+                removeItem(key, type);
+            }
+        }
+    }
+
+    action.element.dispatchEvent(
+        new CustomEvent("localStorage", {
+            detail: {}
+        })
+    );
+}
+
+const localStorage = {
+    getItem: (key) => getItem(key, "localstorage"),
+    setItem: (key, value) => setItem(key, value, "localstorage"),
+    removeItem: (key) => removeItem(key, "localstorage")
+};
+
+const sessionStorage = {
+    getItem: (key) => getItem(key, "sessionstorage"),
+    setItem: (key, value) => setItem(key, value, "sessionstorage"),
+    removeItem: (key) => removeItem(key, "sessionstorage")
 };
 
+function checkSupport() {
+    // Check if the browser supports Web Storage.
+    if (!("localStorage" in window) || !("sessionStorage" in window)) {
+        console.log("This browser doesn't support Web Storage.");
+        support = false;
+    } else {
+        try {
+            window.localStorage.getItem("test");
+            window.sessionStorage.getItem("test");
+            if (window.CoCreateConfig && window.CoCreateConfig.localStorage === false)
+                support = false;
+        } catch (e) {
+            support = false;
+        } finally {
+            if (support) init();
+        }
+    }
+}
+
 Actions.init(
-	{
-		name: "localStorage",
-		endEvent: "localStorage",
-		callback: (data) => {
-			CoCreateLocalStorage.runStorage(data);
-		}
-	},
-	{
-		name: "localStorageRemove",
-		endEvent: "localStorageRemoved",
-		callback: (data) => {
-			CoCreateLocalStorage.runStorage(data);
-		}
-	}
+    {
+        name: "localStorage",
+        endEvent: "localStorage",
+        callback: (data) => {
+            runStorage(data);
+        }
+    },
+    {
+        name: "localStorageRemove",
+        endEvent: "localStorageRemoved",
+        callback: (data) => {
+            runStorage(data);
+        }
+    },
+    {
+        name: "sessionStorage",
+        endEvent: "sessionStorage",
+        callback: (data) => {
+            runStorage(data);
+        }
+    },
+    {
+        name: "sessionStorageRemove",
+        endEvent: "sessionStorageRemoved",
+        callback: (data) => {
+            runStorage(data);
+        }
+    }
 );
 
 Observer.init({
-	types: ["addedNodes"],
-	selector: "[localstorage-set]",
-	callback: async function (mutation) {
-		let key = mutation.target.getAttribute("localstorage-set");
-		let value = await mutation.target.getValue();
-		if (key && value) localStorage.setItem(key, value);
-	}
+    types: ["addedNodes"],
+    selector: "[localstorage-set], [sessionstorage-set]",
+    callback: async function (mutation) {
+        const types = ["localstorage", "sessionstorage"];
+        for (let type of types) {
+            let key = mutation.target.getAttribute(`${type}-set`);
+            if (key) {
+                let value = await mutation.target.getValue();
+                if (value) setItem(key, value, type);
+            }
+        }
+    }
 });
 
-CoCreateLocalStorage.checkSupport();
+checkSupport();
+
 
-export default CoCreateLocalStorage;
+export default {
+    init,
+    initElements,
+    initElement,
+    getItem,
+    setItem,
+    removeItem,
+    runStorage,
+    checkSupport,
+    localStorage,
+    sessionStorage
+};