0

I am new to web development and there is something I'm very use to doing in mobile dev and I wanted to know if it is applicable to web development(Html, CSS & Javascript). It is basically code reuseability, but in this case I want to pass the data(String) I get from a database to another web page where I act on those data.

I would like to implement It with a single web page whose job is to load the data e.g a web page that shows user profile or a web page that show chat history of 2 users.

I really hope you understood what I was trying to say, I honestly suck at type explaining. Thanks guys.

A code example of what I'm trying to implement. example language Flutter(dart).

...
final string userId;
const ShowUserProfile(this.userId);
....
Text('Welcome ${widget.userId} to your profile screen', style: ....);
....
Octagod
  • 90
  • 1
  • 1
  • 12
  • 1
    Url query params, or post body query params, are two of the most basic ways of passing data from one page to another. – Taplar Apr 27 '20 at 22:35
  • @Taplar thanks, so how do I get the strings from the URL in the destination web page? – Octagod Apr 27 '20 at 22:40

3 Answers3

0

Two methods, one is the data can be part of the http link such as https://yourwebsite/iampage/thisisthevalue. But this method is so messy and your users will see the value and also spaces are replaced with %20....

Method 2 is using localStorage or session or indexedDB. Easiest is localStorage. More information on localStorage can be found in this link https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage.

Michael Seltene
  • 543
  • 1
  • 5
  • 17
  • I don't think these options are the most usable ones. Considering the question author is a beginner i would rather recommend the use of @Taplar 's idea in the questions comments. Also localStorage is only accessible to websites with the same domain. – laim2003 Apr 27 '20 at 22:41
0

If you want to pass data from one page to another using only HTML, and JS (client-side) code and not use any server-side code you can accomplish this in two ways:

1) Store data in the URL. Example:

HTML

<a href="/someurl" id="mylink">some link</a>

JS

const data = 'abc';
const link = document.getElementByID('mylink');
link.href += '?data='+ data;

this method is detailed in another question here How to store data as a url parameter using javascript?

2) The preferred method is to store the data as a cookie in the user's browser because this method does not pass the data over the network. Example: JS

document.cookie = "data=abc";
Doug
  • 234
  • 4
  • 11
0

You can also make a separate css document with all the code and then go like this:

<source src="name.css" type="text/css">

Then you can get the same CSS document on 2 diffrent pages
RingGamesCompany
  • 153
  • 1
  • 9