0

I was viewing this website which has an awesome customized search options panel. I was wondering how can we remember the state of checkboxes and textfields when the query returns the results and HTML page renders. Take this page for example, it saves the user's selected options when the page refreshes. I want to implement this feature in Node, Mongo and Express.

Fateh Khan
  • 71
  • 6

1 Answers1

0

There are two ways you could do this. If you want to persist the options long term, when the user selects something, you'd send a POST or PUT request to the server and have the server save the settings in Mongo. The second option (which I think is a better choice here) is to just use local storage on the client. See this documentation for how to use local storage.

With local storage, everything is client-side, so you don't have to worry about the latency and complication of dealing with the server. The user will have their options saved on that computer until they go into their browser settings and delete it.

Edit: I think what you're looking for is session storage. This is similar to local storage but it gets reset when the browser window closes or the session expires.

Nathan
  • 505
  • 2
  • 8
  • Thank you so much. I do like the second solution that you have proposed but I don't want the results to be saved when user revisit that customized search page. How could I achieve that? – Fateh Khan Mar 24 '17 at 10:41
  • No I don't want that. Let's go back to the second solution that you stated and I decide to go with that. When I implement it and save my form state on local storage in JSON format. For example I have a checkbox of Computers that is on. Now when my page re-renders how I'll change the state of that checkbox back to on (as per my JSON file saved on client side). – Fateh Khan Mar 24 '17 at 11:03
  • The linked documentation should tell you how to pull from local storage. After that, you can set the values of the inputs as answered in [this question](http://stackoverflow.com/questions/5700471/set-value-of-input-using-javascript-function). – Nathan Mar 24 '17 at 11:34