📌 Feature Request: Add setLocalStorage Extension to Store hx-data in Local Storage

[xehrad]

Issue Description:

HTMX currently does not have a built-in way to persist hx-data values in localStorage. A new extension, setLocalStorage, would allow developers to automatically store hx-data attributes when an element is clicked. This would enable client-side data persistence and enhance state management in HTMX applications.

---

✨ Proposed Feature:

The setLocalStorage extension will:

1. Detect elements with hx-data when they are processed by HTMX.
2. Add a click event listener to store hx-data values in localStorage.
3. Allow developers to retrieve stored values for future requests or UI updates.

---

💡 Example Usage:

<button hx-ext="setLocalStorage" hx-data='{"theme": "dark", "username": "Alice"}'>Save to Local Storage</button>

• Clicking this button will store:
  • localStorage.setItem("theme", "dark")
  • localStorage.setItem("username", "Alice")

---

🛠 Suggested Implementation:

htmx.defineExtension('setLocalStorage', {
    onEvent: function (name, evt) {
        if (name === 'htmx:afterProcessNode') {
            let element = evt.detail.elt;

            if (element.hasAttribute('hx-data')) {
                element.addEventListener('click', function () {
                    try {
                        const hxData = JSON.parse(element.getAttribute('hx-data'));

                        for (const [key, value] of Object.entries(hxData)) {
                            localStorage.setItem(key, JSON.stringify(value));
                        }
                    } catch (error) {
                        console.error("Invalid hx-data JSON:", error);
                    }
                });
            }
        }
    }
});

---

🎯 Why This Feature Matters:

✅ Enhances Client-Side State Management – Allows developers to persist important UI data (e.g., theme, form inputs, filters).
✅ Improves UX – Users can reload a page and still retain previously selected values.
✅ Lightweight & Simple – Works within HTMX’s declarative approach without requiring extra JavaScript.

Would love to see this feature added to HTMX! Let me know if you need any refinements or contributions. 🙌🔥

[Telroshan]

Hey, just to let you know that we don't accept new extensions in the htmx repo itself, but rather welcome them as community extensions, see our extensions contribution guidelines for more details!
Long-story short : feel free to create a repository of your own to host that extension, and add it to our list of community extensions!