Web Tools #460 - CSS Tools, JS Utilities, JSON, Databases
source link: https://mailchi.mp/webtoolsweekly/web-tools-460
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
CSS Tools, JS Utilities, JSON, Databases
|
Issue #460 • May 12, 2022
Advertisement
|
|
In a previous issue I briefly covered the different properties available when you use the Location object (either Window.location or Document.location). It's also useful to know about the existence of the URL API, which is similar but seems to be a more modern upgrade on what the Location object was doing.
With URL, you have access to a few other features that aren't available on the Location object. Once a URL is generated (e.g. using the URL() constructor), you'll have the following extra features:
- URL.username - This was also formerly available on Location but is now deprecated. This allows you to include a username as part of the URL, for a private login.
- URL.password - Same as URL.username, now deprecated on Location but available on the URL object.
- URL.searchParams - This is probably the most useful property that's not available on the Location object. This allows you to access individual parameters in a query string, as opposed to the URL.search property that gives you the entire query string.
- URL.toJSON() - This new method returns a string containing a serialized version of the URL. MDN's references says that it's not clear how this differs from URL.toString(), so there might be something in the future that changes for this one.
- URL.createObjectURL() - Creates a string containing a URL representing the object given in the parameter.
- URL.revokeObjectURL() - Releases an existing object URL previously created with URL.createObjectURL().
As mentioned, the URL.searchParams property is likely the most practical of these new additions. Here's some example code that demonstrates how to use it:
let url = new URL('https://webtoolsweekly.com/?view=archive&Issue=450');
console.log(url.searchParams.get('view')); // "archive" console.log(url.searchParams.get('Issue')); // "450" console.log(url.searchParams.get('issue')); // null |
The above code first creates the URL using the URL() constructor, then the individual query string parameters are available using searchPrams.get(). As you can see, the query string selected is case sensitive, thus the last line returns a value of null.
This CodePen has an interactive demonstration of this feature. In this case it's only requesting the specific query strings shown but you can adjust the code to use other names if needed.
Now on to this week's tools!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK