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.
Related
I want to update the HTML/pug page of multiple users when particular data changes in my MongoDB database. A user(A) follows another user(B) (whose data is stored in a different collection). When user(B) updates something, user(A) should see the change. There can be multiple people following the same user, and all the people following the user should see live updates.
I tried looking into socket.io but it doesn't look like it is the right thing for my purpose.
Your main options are either websockets (socket.io), server side push notifications with http2, or polling with http.
If socket.io seems overkill, server push notifications probably will too.
You can poll instead. Ie, send an http request from the client at regular intervals, like every 10 (or whatever seems suitable) seconds and update the page based on the response data
You’ll need to use JavaScript on the client for this. Pug templates render just once on page load. If you want dynamic updates after the initial render, you need client side JavaScript in all cases.
Let's say, hypothetically, I am working on a website which provides live score updates for sporting fixtures.
A script checks an external API for updates every few seconds. If there is a new update, the information is saved to a database, and then pushed out to the user.
When a new user accesses the website, a script queries the database and populates the page with all the information ingested so far.
I am using socket.io to push live updates. However, when someone is accessing the page for the first time, I have a couple of options:
I could use the existing socket.io infrastructure to populate the page
I could request the information when routing the user, pass it into res.render() as an argument and render the data using, for example, Pug.
In this circumstance, my instinct would be to utilise the existing socket.io infrastructure; purely because it would save me writing additional code. However, I am curious to know whether there are any other reasons for, or against, using either approach. For example, would it be more performant to render the data, initially, using one approach or the other?
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.
I was wondering if it would be possible to save large amounts of data on the client side with node.js.
The data contain some images or videos. On the first page visit all the data should be
stored in browser cache, so that if there is no internet connection it would not have effect on the displayed content .
Is there a way to do this ?
Thanks for your help :D
You can use the Web Storage API from your client-side (browser-side) Javascript.
If your application stores a megabyte or so, it should work fine. It has limits on size that vary by browser. But, beware, treat the data in Web Storage as ephemeral, that is like a cache rather than permanent storage. (You could seriously annoy your users if you rely on local storage to hold hours of their work.)
You can't really get a node.js program itself to store this information, because those programs run on servers, not in browsers. But you can write your browser-side Javascript code to get data from node.js and then store it.
From browser Javascript you can say stuff like
window.localStorage.setItem ('itemName', value)
and
var retrievedValue = window.localStorage['itemName')
window.localStorage items survive browser exits and restarts. window.sessionStorage items last as long as the browser session continues.
I've started using hood.ie to make a web app.
I wanted to ask is there a convenient way to refresh pages whenever data in the couch db changes?
Thanks.
If you have a function that renders your page, like render, you can do this
hoodie.store.on("change", render)
The "change" event will trigger every time something changes in your data, be it because you called on of the hoodie.store APIs, or because of a changed synced from remote