用js代码实现点击登录按钮将登录名密码存储在本地存储中,存储成功后跳转到首页
时间: 2024-05-14 16:12:13 浏览: 19
以下是用 JavaScript 实现点击登录按钮将登录名密码存储在本地存储中,存储成功后跳转到首页的代码:
HTML 代码:
```html
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<button id="loginBtn">Login</button>
```
JavaScript 代码:
```javascript
const loginBtn = document.getElementById('loginBtn');
loginBtn.addEventListener('click', function () {
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 将登录名和密码存储在本地存储中
localStorage.setItem('username', username);
localStorage.setItem('password', password);
// 跳转到首页
window.location.href = 'home.html';
});
```
在点击登录按钮后,该代码会获取输入框中的用户名和密码,并将它们存储在本地存储中。然后,它会使用 `window.location.href` 将浏览器的 URL 设置为 `home.html`,从而跳转到首页。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)