Storing data from a form using nodejs and express - node.js

I need to get some data from a form as POST request and save that data so i can use it on another page.
I am successful at retrieving the data form the form as JSON, but since i am not using any database, i am not able to see the data that i retrieved from the form when i redirect for the next page..
I am new at using jade, nodejs and express. I'd like a opinion on how to retrieve the data that i've sent via post method.
If i use render, it loads the page with all the correct info, but if i reload or change to another page, the data will simple disappear.

You can use Redux Persist (state management tool) or local storage to save data. Both of these will save your data in a way that it can be retrieved when you navigate to the next page or even if you reload your page.

Related

Node Js Express Js form resubmission error

How to prevent form resubmission on page refresh or back button in express js ? On refresh I want the same page to be reloaded and on back button the previous state of the page .
Is there a particular reason you want to keep the data on the form the same upon refresh?
If you want it to be saved upon refresh you need to save the data the user inputs somewhere.
Either locally in local storage or on the server.
If you choose local storage: On every refresh you check local storage to see if data is already there and if so you populate the form with that data.
If you choose to store the un-submitted data on the server you should be maintaining a session with the server. You can use a cookie here and node has a few good options/ways to do this.
Storing what page the user is on can also be stored in either location.
If you have the option to choose either local or remote - I'd go with local storage.

Is there a difference in a fetch request body when its created from a user typing the url and when its created from a clicked link?

I have a project that uses React but server rendered. When a client requests an initial page of the website by writing the URL in the search field, the server.js uses renderToString() to stringify the react App.js (with some initial data added) and send it to the client along with the bundle.js and css. From this point onwards, React takes over, the client will navigate through the app without needing an initial data anymore. Whenever they navigate to a different component, componentDidMount() will request for the corresponding data from the same server.js.
The problem is that I cannot distinguish between a GET request from a componentDidMount() and from the user typing the URL in the search bar. This is crucial for knowing when to send a new markup with an initial data and when to just send a response object.
Right now I am using a very crude method of attaching a querystring in the GET request from the componentDidMount() to identify that it requires a non-initial data/that the request is not an initial request on entering the website.
This method is very messy as in one instance for example, upon refreshing, the non-initial query stays in the url but since its refreshed, it throws all the cached react app, and it then receives the non-initial data displayed nakedly in the browser.
Is there a better way of doing this? Maybe there is an attached information in the fetch get request that shows where the GET request is generated (whether from a clicked link or a typed URL)?

Hide the URL parameters that are sent from a node server

I send parameters from a html form to my node js server.
Picture Form
In my server I receive the data in the next way:
Picture Server
So far all is good, but now I want to open a web page without the parameters that I have received before,in other way I want that the parameters are not visible in the URL for the users, in the moment that I open a page using “res.redirect” are seen in the browser as:
https://miDominio.com/room.html?idUsuario=user1&nombreRoom=room1
and I would like that the parameters that I pass are not to visible. I want the next way:
https://miDominio.com/room.html
Do you know how can I do this ?

Save the state in customised search

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.
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.

How to get data from the server back into the server on the next request.

Writing a Node/Express app. When a user requests a page, I send it with my mongo document data, however if they say go to an edit page, when I receive the next request I lose all of that precious mongo data and only get whats in the edit form, so I lose a lot of information regarding the thing they are editing. Is there a way that I can send the entire document back along with the body of the request that contains the initial mongo data?

Resources