Passing value from one html to another page - javascript

I have basic web application developed in node.js,mongodb and jquery/javascript. I have login page (login.html [public folder]) with username and password inputs. On login action REST API gets data from mongodb and sends as JSON object back to login.html. On success i will redirect to dashboard.html with window.location("/"). Now i have a <a> in dashboard where i want to set the name from the JSON object.
I saw one solution with localstorage, is there any other way to do this without using any framework like knockout,backbone or angualr. I am looking for modeling the JSON object at sucess call back from REST API and share the model at other pages.

If you don't want to use a backend or localstorage, your only other option is cookies.

Related

How to return data from server to page and set it to localStorage in sveltekit?

Context is an object which I want to save to LocalStorage. In page.server.js I am returning context like this:
return { success: true, userInfo: context};
In page.svelte I can access the object and it's attributes. There is a function which saves the object to localStorage which works when there are no redirects and I call it like this:
{#if form?.success}
{$LoginStatus = {
loggedIn: true,
userInfo: form?.userInfo
}}
My problem is that the page redirects if the user is logged in and (quoting svelte's documentation) the page is ephemeral. What I think the problem is that the page redirects to another page before it can call the function to save context to localStorage.
How can I fix this problem so that context gets stored to localStorage successfully?
It looks like you're using the SvelteKit form actions API.
You are trying to persist data returned from the form action in the page component on the client/browser. However, the main purpose for values returned from a form action is just to update the form (for example: display validation errors or a success message.)
Ideally the form action should persist the data itself before returning. Now, the form action does not have access to localStorage, so you should use something like a database and/or cookie.
If the form action updates a database, the SvelteKit page can load the updated data in its load() function.
Now, when logging in a user just updating the database is not enough: credentials need to be saved on the client (browser). So the database server usually returns credentials that can be saved in the browser. The form action will receive these credentials (on the server side of SvelteKit) and send them to the client/browser side of SvelteKit via cookies.
These cookies will be sent in the headers of all future requests. By default, these cookies cannot be read by JavaScript, but that page load() function runs on server. So the load() function can read the cookie and return the values, which can be accessed from the SvelteKit page from its data prop.
Just using the cookie should be enough, but for completeness: after you get the data prop, you are free to save it to localeStorage at that point.
A log in form can be quite daunting, since it requires combining multiple things like SvelteKit's cookies, form API, etc. Just learning the SvelteKit page routing + load() is difficult enough!
It is possible to add log in to a SvelteKit project without all these things by using a 3rd-party authentication service. I recommend Userfront. They don't have official guides for SvelteKit, but I made a sample project (using an old version of SvelteKit): https://github.com/Leftium/userfrontKit/
Userfront has guides for plain HTML, React, and Vue which would help you create your own SvelteKit version.
I have integrated Userfront with the most recent version of SvelteKit using form actions (unfortunately cannot share.)
The nice thing about Userfront and SvelteKit is you can choose the level of integration:
Use Userfront's toolkit with pre-made forms.
Use Userfront's core JS API to roll your own SvelteKit forms (client-side only, requires JS)
Use Userfront's client-to-server API to roll your own SvelteKit progressive forms (server or client+server, no JS required)
All the methods above store user info/credentials in a cookie which can be accessed from both the server and client.

Passing data to server before page is rendered in node.js?

After a user login, the data is stored on a client side.
There are some pages which don't require a logged user to be viewed...
for example, I have a route on node.js which render a profile page through a URL parameter.
app.get("Profile/:id",function(req,res){ //render page and send it.}
anyone can see this page... but here is the situation... in my app, users can post notes on this pages so they can see it later. So the idea is, if a user is logged in when the user access that page he can see all his notes.
the data of the notes are in server side.
So my question is...
how can I pass the user data into app.get("profile/:id "... function so that the notes can be loaded and sent when is rendered
...
one thing is important to be known. I have a solution in wich I pass a unique key though the url which references to the active socket of the user so that the data is post on a json, is there any other way to pass data from client to server before the page is rendered?
After several days I have manage to achieve the resolution of this question
The idea is to have a Session tipe variable like $_SESSION in php.
you need express-session npm and assign session on require parameter on a express post function. After you have set a value, every time that browser change from location, you can extract that same session variable and use the data to post a response when you are rendering.
I used ejs to render.
In the next link, there is a full tutorial to achieve this.
https://codeforgeek.com/2014/09/manage-session-using-node-js-express-4/

Retaining a value from a response in node js

On page load, say for a particular route for (e.g. https://localhost:8000/home/index), a service is called and the response from the service is rendered to the page at the client side.
On the same page, I have a link that pops up a Backbone.js modal and from the modal a click event triggers which hits another url (e.g. https://localhost:8000/home/index2) upon which another service call triggers and the response is rendered to another html page.
On the same html page, I want to display a value which I got from the first service call on page load. However, I am unable to retain that value as there are two different requests each time. Hence, I cannot even append the value from first response to the request object and use it a second time.
You can use JavaScripts Web Storage API to storage information on client browser.
MDN Web Storage API
For example, If you are on the first screen and call a service, store the service information on localStorage
localStorage.setItem('firstService', serviceResponseObject);
Once you are navigated to second page, you can use localStorage to read to previous service information
localStorage.getItem('firstService');
There are multiple ways to store state between requests.
From the server, if you're using say Express etc, you could store the result in a Session. Or you can even store state in the requests query params, or from a POST request.
You could also store some data on the client end, using say Cookies or localstorage.
What you choose really depends, it might be best if you explain in more detail what sort of information your passing between pages.
If it's just a simple value, I would go for using query params.
eg. Just place in your url https://localhost:8000/home/index2?value=123, and then from node.js, req.query.value would have your value.

How to transfer data from one page to another using angular js and Java servlets

I have created one login page in angular js and Written a servlet for login action. I am trying to login with username and password. Currently I am able to redirect to Dashboard page after successful login using $window but I want to show that user data also on that page. So how to do that in angularjs and servlets?
Use the HttpServletRequest to get the Remote User.
In your dashboard Controller, fetch the remote User via AJAX (for example). and set the fetched User to $rootScope.
As soon as your DashBoard page loads, the first AJAX call should be to fetch the User and set the fetched User to $rootScope.
on your dashboard just use this
$rootScope.currentUser = <%= HttpServletRequest.getRemoteUser() %>
you can use this directly in html page
You have different choices to store you data using localStorage in angular js eg:
localStorage
sesstionStorage
For example following data you have to transfer to another state
var user_data = {"user_id": 1,"username": "Alpha"}
// To add to local storage
localStorageService.set('user_data',user_data);
// Read that value back
var user_obj = localStorageService.get('user_data');
After saving you can get these data from same storage where you saved.
This will really help you.
Please read out this link to get more understnading.
Thanks

Update value of javascript variable with results from SimpleHTTPServer response

I am trying to make an html app for local use, consisting of an HTML page using Google Maps API V3, a SQLite database, and a SimpleHTTPServer script.
The workflow is the following:
User starts the server and opens the page, which contains a map with a set of markers, and a form with filters similar to those of Google Fusion Tables;
User interacts with form, which sets some parameters for a query;
When the user clicks "Submit", page sends a request to HTTPServer, whose request handler queries the SQLite database and returns the result as JSON/JSONP/something-else;
Some function takes back the data and map is updated;
My doubts are more conceptual than anything else, and specifically I would like to know (how/where to look for):
How should I send a request for the server in javascript, and how to listen back to it?
How should the server send data to the request, in order to update its value instead of refreshing the page?
Sorry if my questions seem obvious, but HTTP is something very new to me, and so is client-server communication.
Thanks for reading!
I think you can use CGIHTTPServer.
ref:
http://pydoc.org/2.5.1/CGIHTTPServer.html
Q:How should I send a request for the server in javascript, and how to listen back to it
A:Please google "ajax". "jquery" is one of the most convenient javascript library for ajax.
Q:How should the server send data to the request
A:just use "print" in python script which is called by CGIHTTPServer.
In this case, the output of "print" will be the response to http client(web browser).
In the script mentioned above, you should extract request parameter sent by http client,
with "do_Get()" or do_Post() function.

Categories

Resources