Save all fields to localStorage

[chriskthomas]

Right now, all inputs are lost if you refresh the page or return later. I think a reasonable implementation would be one such that:

1. Pressing the "Submit" button stores all form inputs in browser localStorage (or perhaps storage is updated on keypress within the input fields)
2. All visible inputs are restored from localStorage on page load
3. There is "Clear" button which resets all fields and deletes the localStorage values (e.g., clear all values and refresh the page)

[CharanMN7]

I'd like to take this one.

[chriskthomas]

That's great!

[chriskthomas]

Btw, don't worry too much about the src/dist directories. If you put a PHP test server in the src directory, it should be the same as the dist.

Currently the only difference between src and dist is that index.php is compiled to a static index.html

Eventually, I'll also minify the css/js in the dist directory. The goal though is to keep it so that applying the php devserver in src is enough to test/run the site.

[mwt]

@CharanMN7 Are the changes in your fork working? I know there have been many changes in this repo since you started, but none of them should break the code if it works on that older ref.

[CharanMN7]

@mwt The changes are working but.... the extra links I added are behaving a bit odd when I try to retrieve them from local storage. They're not going away even when I clear the cookies. I'm not sure if it's the JavaScript I wrote, or the PHP variables...

I got occupied with my exams that suddenly got preponed. (Still am)

[mwt]

Thanks! Good luck on your exams.

I think that local storage is separate from cookies. One way to clear it is with localStorage.clear().

[CharanMN7]

Okay, I'll try that now.

[cristianmacedo]

Hi, is anyone still working on this issue? If not, I would be happy to take this :)

[CharanMN7]

Sure! I'd like to pass it. I'm too caught up to be working on anything right now. @chriskthomas ?

[mwt]

I assigned for @chriskthomas. That would be helpful @cristianmacedo. You can take a look at what @CharanMN7 did to get a start:

js (commit of me deleting it): 9449cdc

Thanks @CharanMN7 for the work you did on this.

I think you can be less conservative with editing the html in the web form. For example, it's probably more robust to iterate over a new class that you add to the inputs rather than all inputs.

I'm not sure which event is best to use for saving the inputs. Perhaps you want to add a change event listener to each field of the input which updates only that one field in the stored object?

You could also save when the submit button is clicked. I think you'll need to preventDefault on the form's submit event before you can save them.

[CharanMN7]

Well, the data is lost only when the form is closed or submitted. So I tried using unload and submit events to save the data, and the load event to retrieve it back into the form once the user visits the form.
Also, I wasn't sure how a server rendered HTML would go with the JavaScript. And, I thought it would be really helpful to be able to use the PHP variables from the backend in the JavaScript code. I just couldn't figure that out. Besides, the code got really confusing at one point because I was manipulating a lot of global variables.

[cristianmacedo]

Thanks for all the information guys, I opened PR #24 and shared some details regarding implementation decisions on the comments. I appreciate the opportunity of contributing to this project and welcome any feedback and suggestions.