JavaScript data transmission between different pages (URL parameter acquisition)

On web pages, we often encounter this situation: when we enter information on a certain page, it will jump to another page and pass the information we entered to another page. How do we do it?
Today, let’s try it out in practice. For example, there are two pages now. When we enter user information on one page, we will jump to another page and display the xx welcome to login interface.

Let’s take a look at the design ideas first:

The first login page contains a submission form, and action is submitted to index.html page
The second page can use the parameters of the first page, thus achieving the effect of transferring data between different pages
The second page can use the data from the first page because it uses the location.search parameter in the URL.
In the second page, this parameter needs to be extracted.
The first step is to use substr to remove it?
The second step is to use split('=') to separate the key and value
The first array is the key and the second array is the value

The implementation code is:

<body>
    <form action="index.html">
        Username: <input type="text" name = 'uname'>
        <input type="submit" value="Submit">
    </form>
</body>

<body>
    <div><span style="font-weight:700; color:blue"></span>Welcome to log in! </div>
    <script>
       var span = document.querySelector('span'); //Get the span tag var myName = location.search.substr(1); //Get the parameter entered on the previous page var arr = myName.split('='); //Use the = sign to split the key and value span.innerHTML = arr[1] + '' //Pass the data into span
    </script>
</body>

The running effect is:

This concludes this article on the transmission of JavaScript data on different pages (URL parameter acquisition). For more information on the transmission of JavaScript data on different pages, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Summary of 4 methods for front-end JS to obtain URL parameters
Several common methods for native JS to obtain URL link parameters
Two methods to obtain URL parameters based on JavaScript
Detailed explanation of the getRequest() method example for obtaining URL parameters in js
JS obtains url parameters and sends POST request method in json format
Detailed explanation of how to get the querystring parameter in the URL in JavaScript
JavaScript method to obtain URL parameters

<<: MySQL database transaction example tutorial

>>: About input file control and beautification