CODEWITHSUNDEEP
html
Naveed Aheer
Naveed Aheer

Reputation: 1825

How to transfer data from one page to another page in html without any database?

I want to transfer data from one page to next page in html without using any database. I want to show data on next page that is filled on first page like user details / user profile information.

Upvotes: 0

Views: 2229

Answers (3)

Uttam
Uttam

Reputation: 776

It can be done easily by using EJS library. You have to install npm, node.js and express to use this library.

Here is the link for the procedure for downloading. https://phoenixnap.com/kb/install-node-js-npm-on-windows

After downloading, you have to type npm install ejs on your command prompt and at the same hierarchy make a directory named views and inside views directory create a index.ejs file which you can use as HTML.

Then you can easily pass the data through EJS snippets, you can read these documentation for more knowledge on EJS. https://ejs.co/#docs

In simple words you have to send data from js file and you can encounter those data in the ejs file using <%= %> tag.

EXAMPLE of sending data from JS file:-

app.get("/",function(req,res){
res.render("/", {passed_variable:existing_variable});
})

EXAMPLE of receiving those data in EJS file:-

<h1> <%=passed_variable%> </h1>

Upvotes: 0

Mobius
Mobius

Reputation: 2896

There are a number of ways you can do something like this in JavaScript. The two major techniques are as follows.

  • Single Page App. this is an application where navigation does not actually do a full page load, but new "pages" are pulled in either via ajax, or generated by javascript. There are many frameworks for building them, but React and Preact are my favorites.

  • Store variables in localStorage or sessionStorage, and update the proper places in the html with javascript.

Upvotes: 1

Brian Cryer
Brian Cryer

Reputation: 2226

You can pass data from one page to another via parameters that you add to the url. So lets say you were collecting "name" and "age" on one page, and the url of your second page is "http://example.com/second.html" then when you encode the parameters the url becomes "http://example.com/second.html?name=Brian&age=21".

On your first page create a form and target the second page in your form, the form's action must be "get" which is the default so you don't need to specify it. So something like:

   <form action="second.html">
       <p>Name: <input type="text" size="20" name="name"></p>
       <p>Age: <input type="text" size="3" name="age"></p>
   </form>

On your second page you can then access those parameters via JavaScript.

There is a very simple page that demonstrates this idea here: http://www.cryer.co.uk/resources/javascript/script8.htm

The JavaScript that page uses to access the value of each parameter is:

<script type="text/javascript">
function GetParam(name)
{
  var start=location.search.indexOf("?"+name+"=");
  if (start<0) start=location.search.indexOf("&"+name+"=");
  if (start<0) return '';
  start += name.length+2;
  var end=location.search.indexOf("&",start)-1;
  if (end<0) end=location.search.length;
  var result='';
  for(var i=start;i<=end;i++) {
    var c=location.search.charAt(i);
    result=result+(c=='+'?' ':c);
  }
  return unescape(result);
}
</script>

Call that function with the name of the parameter that you want.

Upvotes: 0

Related Questions