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: ....);
....
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
some link
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";
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.
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
Related
I am trying to read the URL to pull the data out of it then split the URL at ? without reloading the page. How would I do this?
The reason why I am doing this is so that I can pass a name from one page to another to display.
No jQuery please as I can't use it in my development workspace.
My URL looks like this http://localhost:3000/view/1?Username=Dan I want to read the Username=Dan then remove it from the URL so the client can't see it.
If you want to save state of your application, don't use URL parameters in this way, store it in localStorage:
Save it on the first page:
localStorage.setItem('name', 'Dan');
And read it on the following page:
let name = localStorage.getItem('name')
Or, if you don't need it to live longer than the session, use sessionStorage (it has an identical API).
I have used php simple html dom to no success on this issue.
Now I have gone to DOMDocument and DOMXpath and this does seem promising.
Here is my issue:
I am trying to scrape data from a page which is loaded via a web service request after the page initially shows. It is only milliseconds but because of this, normal scraping shows a template value as opposed to the actual data.
I have found the endpoint url using chrome developer network settings. So if I enter that url into the browser address bar the data displays nicely in JSON format. All Good.
My problem arises because any time the site is re-visited or the page refreshed, the suffix of the endpoint url is randomly-generated so I can't hard-code this url into my php file. For example the end of the url is "?=253648592" on first visit but on refresh it could be "?=375482910". The base of the url is static.
Without getting into headless browsers (I tried and MY head hurts!) is there a way to have Xpath find this random url when the page loads?
Sorry for being so long-winded but I wanted to explain as best I could.
It's probably much easier and faster to just use a regex if you only need one item/value from the HTML. I would like to give an example but therefor I would need a more extended snippet of how the HTML looks like that contains the endpoint that you want to fetch.
Is it possible to give a snippet of the HTML that contains the endpoint?
I am creating a website where each user will have their uniq page. users can visit other user's pages by
http://website/user?user=<username>&session=<session>
Now I want to simplify above URL to
http://website/user/<username> (something like pinterest or facebook)
I thought I can use mod_rewrite. However, mod_rewrite is for server side. I do not want to include any PHP code. What I do to get data for a user :
load the basic HTML template and then based on which user we are talking about, load user's data asynchronously.
Can I achieve above in JS? If yes, how?
-Ajay
Unfortunately, you can't do exactly this.
But possible solution would be to place your HTML hub page to http://website/user/ and form user URLs like this: http://website/user/#username. JS can get the user name simply by var username = location.href.split("#")[1].
By the way, you said that you are not using PHP. How do you parse URL arguments then?
Is it possible to copy values from a form on page x to a form on page y using javascript. The data is the same but just different pages and different applications?
Yes, you can do this. Using AngularJS you could use "search" variables and then plug these into the form. Using normal javascript you may be able to use a # with the data. Using PHP + normal javascript (more secure) you can send a POST to the page (which is a PHP page) and have the page, if the POST params with your values exist, put a javascript fragment on the page setting the values of the form when the page is done loading.
Cookies are also always an option :)
[EDIT]
After discussion, here is the solution to the question: GitHub
Actually, cross-tab JS is not allowed. I am not sure about bleeding-edge apis.
Theoretically, it is possible to do via local storage with a same-origin restriction. But you'd better don't mind this option.
Also, try to play with cookies.
Try something like this:
window.onload = function() {
var myValues;
if (document.cookie) {
// get your values onLoad
myValues = document.cookie;
} else {
// set your values
myValues = "..." // your values
document.cookie = myValues;
}
}
If it's just from one page to another you can append the data to the request as POST (with PHP) variables, or a simple query string (GET) and read them once the page has loaded/populate relevant fields - if the second page is loaded directly from the first.
If it needs to be retained until an unspecified time (when the user may have gone to other pages in the interim) you could look into using cookies.
how to get GET and POST variables with JQuery?
I'm on a firefox plugin development. By the way I want to store some information from documents which are loaded by the browser. And also some information given by the user about the webpage (like, do this page contains explicit contents? (yes/no)) through my javascript code. These information should be stored in some place so that I can warn/alert the user about the content of the webpage he/she about to load like, You are about to view a webpage with more than 50% advertisement.In short my question is Where do normal firefox plugin store cached data?
Thanks in advance.
You can use simple storage built into the browser. You start with this commands:
var pref = Components.classes["#mozilla.org/preferences-service;1"].getService(Components.interfaces.nsIPrefBranch);
Then you can save data into like this:
pref.setCharPref("freelayer.mydata", mydataold + mydatanew);
Then you can read that data with:
var mydata = pref.getCharPref("freelayer.mydata").split(' ');
So you want to persist the data? SQLite should do it. If your data is highly connected to web pages, then places annotations might be another option.