Refactor storage handling across application

- Introduced a new storageHelpers module to centralize localStorage interactions, improving code maintainability and readability.
- Updated various components and managers to utilize the new storageHelpers functions for setting, getting, and removing items from localStorage.
- Added migration logic to handle localStorage items during application initialization, ensuring compatibility with the new storage structure.
- Enhanced logging during application initialization for better debugging.

static/js/utils/storageHelpers.js

@@ -0,0 +1,110 @@
+/**
+ * Utility functions for localStorage with namespacing to avoid conflicts
+ * with other ComfyUI extensions or the main application
+ */
+
+// Namespace prefix for all localStorage keys
+const STORAGE_PREFIX = 'lora_manager_';
+
+/**
+ * Get an item from localStorage with namespace support and fallback to legacy keys
+ * @param {string} key - The key without prefix
+ * @param {any} defaultValue - Default value if key doesn't exist
+ * @returns {any} The stored value or defaultValue
+ */
+export function getStorageItem(key, defaultValue = null) {
+    // Try with prefix first
+    const prefixedValue = localStorage.getItem(STORAGE_PREFIX + key);
+    
+    if (prefixedValue !== null) {
+        // If it's a JSON string, parse it
+        try {
+            return JSON.parse(prefixedValue);
+        } catch (e) {
+            return prefixedValue;
+        }
+    }
+    
+    // Fallback to legacy key (without prefix)
+    const legacyValue = localStorage.getItem(key);
+    
+    if (legacyValue !== null) {
+        // If found in legacy storage, migrate it to prefixed storage
+        try {
+            const parsedValue = JSON.parse(legacyValue);
+            setStorageItem(key, parsedValue);
+            return parsedValue;
+        } catch (e) {
+            setStorageItem(key, legacyValue);
+            return legacyValue;
+        }
+    }
+    
+    // Return default value if neither prefixed nor legacy key exists
+    return defaultValue;
+}
+
+/**
+ * Set an item in localStorage with namespace prefix
+ * @param {string} key - The key without prefix
+ * @param {any} value - The value to store
+ */
+export function setStorageItem(key, value) {
+    const prefixedKey = STORAGE_PREFIX + key;
+    
+    // Convert objects and arrays to JSON strings
+    if (typeof value === 'object' && value !== null) {
+        localStorage.setItem(prefixedKey, JSON.stringify(value));
+    } else {
+        localStorage.setItem(prefixedKey, value);
+    }
+}
+
+/**
+ * Remove an item from localStorage (both prefixed and legacy)
+ * @param {string} key - The key without prefix
+ */
+export function removeStorageItem(key) {
+    localStorage.removeItem(STORAGE_PREFIX + key);
+    localStorage.removeItem(key); // Also remove legacy key
+}
+
+/**
+ * Migrate all existing localStorage items to use the prefix
+ * This should be called once during application initialization
+ */
+export function migrateStorageItems() {
+    // List of known keys used in the application
+    const knownKeys = [
+        'nsfwBlurLevel',
+        'theme',
+        'activeFolder',
+        'folderTagsCollapsed',
+        'settings',
+        'loras_filters',
+        'recipes_filters',
+        'checkpoints_filters',
+        'loras_search_prefs',
+        'recipes_search_prefs',
+        'checkpoints_search_prefs',
+        'show_update_notifications',
+        'last_update_check'
+    ];
+    
+    // Migrate each known key
+    knownKeys.forEach(key => {
+        const value = localStorage.getItem(key);
+        if (value !== null) {
+            try {
+                // Try to parse as JSON first
+                const parsedValue = JSON.parse(value);
+                setStorageItem(key, parsedValue);
+            } catch (e) {
+                // If not JSON, store as is
+                setStorageItem(key, value);
+            }
+        }
+    });
+    
+    console.log('Lora Manager: Storage migration completed');
+}

static/js/utils/uiHelpers.js

@@ -1,5 +1,6 @@
 import { state } from '../state/index.js';
 import { resetAndReload } from '../api/loraApi.js';
+import { getStorageItem, setStorageItem } from './storageHelpers.js';
 
 export function showToast(message, type = 'info') {
     const toast = document.createElement('div');
@@ -27,7 +28,7 @@ export function lazyLoadImages() {
 }
 
 export function restoreFolderFilter() {
-    const activeFolder = localStorage.getItem('activeFolder');
+    const activeFolder = getStorageItem('activeFolder');
     const folderTag = activeFolder && document.querySelector(`.tag[data-folder="${activeFolder}"]`);
     if (folderTag) {
         folderTag.classList.add('active');
@@ -36,13 +37,13 @@ export function restoreFolderFilter() {
 }
 
 export function initTheme() {
-    document.body.dataset.theme = localStorage.getItem('theme') || 'dark';
+    document.body.dataset.theme = getStorageItem('theme') || 'dark';
 }
 
 export function toggleTheme() {
     const theme = document.body.dataset.theme === 'light' ? 'dark' : 'light';
     document.body.dataset.theme = theme;
-    localStorage.setItem('theme', theme);
+    setStorageItem('theme', theme);
 }
 
 export function toggleFolder(tag) {
@@ -158,12 +159,12 @@ export function toggleFolderTags() {
             // Change icon to indicate folders are hidden
             toggleBtn.className = 'fas fa-folder-plus';
             toggleBtn.parentElement.title = 'Show folder tags';
-            localStorage.setItem('folderTagsCollapsed', 'true');
+            setStorageItem('folderTagsCollapsed', 'true');
         } else {
             // Change icon to indicate folders are visible
             toggleBtn.className = 'fas fa-folder-minus';
             toggleBtn.parentElement.title = 'Hide folder tags';
-            localStorage.setItem('folderTagsCollapsed', 'false');
+            setStorageItem('folderTagsCollapsed', 'false');
         }
         
         // Update panel positions after toggling
@@ -176,7 +177,7 @@ export function toggleFolderTags() {
 
 // Add this to your existing initialization code
 export function initFolderTagsVisibility() {
-    const isCollapsed = localStorage.getItem('folderTagsCollapsed') === 'true';
+    const isCollapsed = getStorageItem('folderTagsCollapsed') === 'true';
     if (isCollapsed) {
         const folderTags = document.querySelector('.folder-tags');
         const toggleBtn = document.querySelector('.toggle-folders-btn i');