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).
Related
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
I would like to know if I somehow can browse to i.e http://avatars.io/twitter/billgates
and then store the url we got redirected to * in a variable.
which in this case will be http://pbs.twimg.com/profile_images/558109954561679360/j1f9DiJi_normal.jpeg
Using JavaScript and without the user noticing.
The reason I want to do this is because I want to change a few things in the final url before storing it.
I used query string now to adress some special (dynamic) content. Now is my question: Is it possible to change the actual query by JS when i change the dynamic content, so that i could refresh the site with the same content and not with the default query values.
Yes, you can achieve this by changing window.location.href if you want the browser to go to a different URL. For example, go to http://google.com and now open the JavaScript console of your browser and put:
window.location.href = 'http://google.com/?q=abc'
If you only want to change part of the URL (query string), there are a bunch of ways to do that. You can do it manually and set a whole new URL or use libraries/plugins to help you do this. How to parse the query string: How can I get query string values in JavaScript?
i hope i understood the question right...
i guess that browsers wont like to allow you to touch their Request object...
but i think of two methods:
you can redirect the browser to the new changed link using
window.location='?q=changed_search'
in your other scripts, dont reference the real Querystring, but a (private to the page) copy of it which you can change wherever you want.
Note: QueryString is mostly input from the user, and i dont think it should be needed to change without the page being resubmitted (as suggested in 1).
cheers.
I want to send some data from one HTML page to another. I am sending the data through the query parameters like http://localhost/project/index.html?status=exist. The problem with this method is that data remains in the URL. Is there any other method to send the data across HTML pages using JavaScript or jquery.
why don't you store your values in HTML5 storage objects such as sessionStorage or localStorage, visit HTML5 Storage Doc to get more details. Using this you can store intermediate values temporarily/permanently locally and then access your values later.
To store values for a session:
sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')
or more permanently:
localStorage.setItem('label', 'value')
localStorage.getItem('label')
So you can store (temporarily) form data between multiple pages using HTML5 storage objects which you can even retain after reload..
I know this is an old post, but figured I'd share my two cents. #Neji is correct in that you can use sessionStorage.getItem('label'), and sessionStorage.setItem('label', 'value') (although he had the setItem parameters backwards, not a big deal). I much more prefer the following, I think it's more succinct:
var val = sessionStorage.myValue
in place of getItem and
sessionStorage.myValue = 'value'
in place of setItem.
Also, it should be noted that in order to store JavaScript objects, they must be stringified to set them, and parsed to get them, like so:
sessionStorage.myObject = JSON.stringify(myObject); //will set object to the stringified myObject
var myObject = JSON.parse(sessionStorage.myObject); //will parse JSON string back to object
The reason is that sessionStorage stores everything as a string, so if you just say sessionStorage.object = myObject all you get is [object Object], which doesn't help you too much.
possibly if you want to just transfer data to be used by JavaScript then you can use Hash Tags
like this
http://localhost/project/index.html#exist
so once when you are done retriving the data show the message and change the
window.location.hash to a suitable value.. now whenever you ll refresh the page the hashtag wont be present
NOTE: when you will use this instead ot query strings the data being sent cannot be retrived/read by the server
Well, you can actually send data via JavaScript - but you should know that this is the #1 exploit source in web pages as it's XSS :)
I personally would suggest to use an HTML formular instead and modify the javascript data on the server side.
But if you want to share between two pages (I assume they are not both on localhost, because that won't make sense to share between two both-backend-driven pages) you will need to specify the CORS headers to allow the browser to send data to the whitelisted domains.
These two links might help you, it shows the example via Node backend, but you get the point how it works:
Link 1
And, of course, the CORS spec:
Link 2
~Cheers
I thought this would be easy but I guess I was wrong. I have a url;
http://www.example.com/aa/bb.html?uid=123
using javascript jquery and html, I am able to retrieve data from a json api with the uid in the sample url above. However, I don't want that url displayed like that in the address bar after the data has been parsed. Rather, I need it to display as;
http://www.example.com/aa/item-title
where item-titleis the title of the data referenced by uid=123.
A php mod-rewrite would have been ideal, but this project does not make use of server side scripting.
Thanks in advance
If you change or modify the URL then the browser try to fetch data fro the new URL. You can do something with the part of URL after # mark.
Like :
http://www.example.com/aa/bb.html?uid=123#old_part
to
http://www.example.com/aa/bb.html?uid=123#newpart
I can see only one solution to your problem as you don't want to use mod_rewrite. You can redirect from first page just changing the URL based on the given uid value to the next page you want to display.
First page - read parameter uid and build the redirect URL based on the title(not any other stuff in your first URL page)
Redirect to the built URL
In redirected page do the rest of page specific stuff.