-
Notifications
You must be signed in to change notification settings - Fork 22
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Save all fields to localStorage
#24
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There are accessibility issues in these changes.
Let's give it a try! |
It's live at the test domain: https://linkfree.fly.dev It seems to be working. I haven't read the code yet. It seems good. The preview checkbox doesn't get saved. I think this is good. Is this also explicitly excluded? |
HI @mwt, thanks for merging the PR, it seems to be working great on the production environment. Regarding the |
Hi. That makes sense. I think the ideal is for all the fields that are intended to be saved to have a Merging the PR actually puts it in a dev environment. I have to sync to the production branch for it to affect the production version. It's a bit confusing, but: Production: https://linkfree.ckt.im |
Ah yes I didn't notice it was the development environment. |
Closes #4
As highlighted by @chriskthomas in issue #4, right now, all input values are lost upon page refresh or revisiting the page later. To address this, I've implemented a localStorage saving mechanism with the following steps:
LocalStorage Data Storage
Upon pressing the "Submit" button, all form values are now saved to a
form
localStorage
item. This is achieved using the FormData interface, which conveniently captures the key/value pairs of form fields and their corresponding values.Restoring Saved Values
When the page loads, the values stored in the
form
localStorage
item are automatically populated into their respective input fields based on thename
property. Additionally, for input fields with the prefixlinks
that are not already present in the document, and have an index higher than the current index of existing links, a function is triggered to create the missing input fields. This ensures that additional links saved tolocalStorage
are correctly reconstructed upon page load.Clear Functionality
I've implemented a "Clear" button located next to the "Submit" button. This button, when clicked, utilizes the
form.reset()
method to clear all form values. Additionally, any data stored in theform
localStorage
item is removed, providing a clean slate for the user.I welcome feedback and suggestions on the dynamic approach for handling file inputs and any other parts of the implementation. By the way, I've gone ahead and made a few adjustments to variable names and aspects of code-splitting as well as some JSDoc comments to some functions. I hope that's alright – just aiming to enhance the overall structure.