IMG-LOGO
×

Tài Liệu Học

Khoá học lập trình Javascript

Khai báo biến & hàm mặc định trong Javascript

[Video] Tạo dự án JS đầu tiên - Lập Trình JS [Video] Khai báo biến - toán tử - Lập Trình JavaScript [Video] Các hàm sẵn có trong js - Khoá Học Lập Trình JS

Mệnh đề điều kiện

[Video] Cấu trúc điều kiện if else switch - Lập trình Javascript

Vòng lặp for, while, do..while

[Video] Tìm hiểu vòng lặp for, while, do .. while trong Javascript

Array & Function & Object

[Video] Tìm hiểu Function trong Javascript [Video] Tìm hiểu Array trong Javascript [Video] Khai báo Object trong Javascript [Video] Gửi giữ liệu qua các trang html bằng javascript - HTML/CSS [Video] Bài tập - ôn tập mảng - quản lý sinh viên - Lập trình Javascript [Video] Khai báo function trong Object - Lập trình Javascript [Video] Tìm hiểu function trong string - Lập trình Javascript

Xử lý sự kiện & thao tác thẻ HTML

[Video] Event - Lập Trình JS [Video] Tương tác lên tags trong HTML bằng JS [Video] Thêm tags vào tags khác bằng javascript + ví du thêm sinh viên - lập trình JS [Video] Tương tác thẻ HTML bằng Javascript qua ví dụ đặt đơn hàng (Order Entry Form) [Video] Bài tập - Quản lý sản phẩm bằng javascript - lập trình javascript [Video] Quản lý sinh viên - Lập trình Javascript

Lưu trữ Javascript

[Video] Cookie - khoá học lập trình JavaScript [Video] Localstorage - Khoá học lập trình JavaScript [Video] Lưu trữ thông tin sinh viên bằng LocalStorage - Lập trình Javascript

Examination & Ôn Tập Tổng Quát

1000 Bài tập JavaScript - Lập Trình JavaScript




Trang Chủ Học JS LocalStorage: Quản lý đăng ký đăng nhập- Lập trình Javascript

LocalStorage: Quản lý đăng ký đăng nhập- Lập trình Javascript

by GokiSoft.com - 16:56 14/01/2022 13,529 Lượt Xem

1. Tạo ra 1 trang web đặt tên là : register.html gồm các input (tên, tuổi, email) và button đăng ký

Khi ngươi dùng click vào button đăng ký thì lưu toàn bộ thông tin vào LocalStorage

2. Tạo ra 1 trang web mới là : show.html -> Lấy thông tin luu trong LocalStorage và hiển thị ra màn hình


Bình luận



Chia sẻ từ lớp học

Nguyễn Anh Vũ [T2008A]

Ngày viết: 13:44 04/11/2020


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>register</title>
	<meta charset="utf-8">
</head>
<body>
	<form method="post" onsubmit="return saveData()">
		<p>
			<label>Name:</label>
			<input required type="text" name="fullname"id="fullname_form">
		</p>
		<p>
			<label>Age:</label>
			<input required type="number" name="age"id="age_form">
		</p>
		<p>
			<label>Email:</label>
			<input required type="email" name="email"id="email_form">
		</p>
		<button>Đăng ký</button>
	</form>
<script type="text/javascript">
	function saveData(){
		fullname= document.getElementById("fullname_form").value
		age= document.getElementById("age_form").value
		email=document.getElementById("email_form").value
		console.log(fullname)
		console.log(age)
		console.log(email)
	
	localStorage.setItem("fullname_db", fullname)
	localStorage.setItem("age_db",age)
	localStorage.setItem("email_db",email)

	return true;}


</script>
</body>
</html>


Triệu Văn Lăng [T2008A]

Ngày viết: 13:18 31/10/2020


#show.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Show</title>
</head>
<body>
    <button onclick="ShowInfor()">Show Information</button>
    <div id="show"></div>
        <script>
            function ShowInfor() {
                document.getElementById('show').innerHTML=`
                <form>
                    <p>
                        <label>Tên</label>
                        <input type="text" id="name" disabled>
                    </p>
                    <p>
                        <label>Tuổi:</label>
                        <input type="number" id="age" disabled>
                    </p>
                    <p>
                        <label>Email:</label>
                        <input type="email" id="email" disabled>
                    </p>
                </form>
                `
                document.getElementById('name').value=localStorage.getItem('name_db')
                document.getElementById('age').value=localStorage.getItem('age_db')
                document.getElementById('email').value=localStorage.getItem('email_db')
            }
        </script>
</body>
</html>


Triệu Văn Lăng [T2008A]

Ngày viết: 13:17 31/10/2020


#register.html


<!DOCTYPE html>
<html>
<head>
	<title>Register</title>
	<meta charset="utf-8">
</head>
<body>
	<form onsubmit="return saveInfor()">
		<div>
			<label>Tên</label>
			<input type="text" name="name" placeholder="Nhập Tên" id="name"  required >
		</div>
		<div>
			<label>Tuổi</label>
			<input type="number" name="age" placeholder="Nhập Tuổi" min="1" max="100" id="age" required>
		</div>
		<div>
			<label>Email</label>
			<input type="email" name="mail" placeholder="Nhập Email" id="email" required>
		</div>
		<div>
			<button >Register</button>
			
		</div>
	</form>
	<br><br>
	<div id="link"></div>
	 <script>
        function saveInfor() {
            fullname = document.getElementById('name').value
			email = document.getElementById('email').value
			age = document.getElementById('age').value
            localStorage.setItem('name_db',fullname)
            localStorage.setItem('email_db',email)
            localStorage.setItem('age_db',age)
            document.getElementById('name').value=''
            document.getElementById('email').value=''
            document.getElementById('age').value=''
            document.getElementById('link').innerHTML=`<a href="show.html">Xem thông tin</a>`
            return false
        }
    </script>
</body>
</html>


Do Trung Duc [T2008A]

Ngày viết: 09:40 26/10/2020



<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		input{
			margin-top: 10px;
			width: 20%;
		}
		button{
			margin-top: 10px;
		}


	</style>
</head>
<body>
<form method="post" onsubmit="return saveData()">
<div style="padding: 10px;">
	<div>
		<label>Full Name</label>
		<input placeholder="Enter your name..."  required type="text" name="name" id="name" pattern="[a-zA-Z]{1,100}">
	</div>

	<div>
	<label>Age</label>
	<input placeholder="Enter your age..."  required  type="number" name="age" id="age" pattern="[0-9]{,2}" min="1" max ="100">
	</div>

	<div>
	<label>Email</label>
	<input placeholder="Enter your email..."  required type="email" name="email" id="email">
	</div>

	<div>
	<button type="button" onclick="displayData()">Hienthi</button>
	</div>
</div>
</form>

<script type="text/javascript">

		function displayData(){
		fullname = localStorage.getItem('fullname')
		age = localStorage.getItem('age')
		email = localStorage.getItem('email')

		console.log(fullname)
		console.log(age)
		console.log(email)

		document.getElementById('name').value = fullname
		document.getElementById('age').value  = age
		document.getElementById('email').value  = email
	}

</script>

</body>
</html>


Do Trung Duc [T2008A]

Ngày viết: 09:39 26/10/2020



<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		input{
			margin-top: 10px;
			width: 20%;
		}
		button{
			margin-top: 10px;
		}


	</style>
</head>
<body>
<form method="post" onsubmit="return saveData()">
<div style="padding: 10px;">
	<div>
		<label>Full Name</label>
		<input placeholder="Enter your name..."  required type="text" name="name" id="name" pattern="[a-zA-Z ]{1,100}">
	</div>

	<div>
	<label>Age</label>
	<input placeholder="Enter your age..."  required  type="number" name="age" id="age" pattern="[0-9]" minlength="2">
	</div>

	<div>
	<label>Email</label>
	<input placeholder="Enter your email..."  required type="email" name="email" id="email">
	</div>

	<div>
	<button type="submit">Register</button>
	<button type="button" onclick="displayData()">Hienthi</button>

	</div>
</div>
</form>

<script type="text/javascript">
	function saveData() {
		fullname = document.getElementById('name').value
		age = document.getElementById('age').value
		email = document.getElementById('email').value

		console.log(fullname)
		console.log(age)
		console.log(email)

		localStorage.setItem("fullname", fullname) 
		localStorage.setItem("age", age)
		localStorage.setItem("email", email)

		return true;

	}

</script>

</body>
</html>


Tài Liệu Tham Khảo

Ứng Dụng Tiện Ích



Đã sao chép!!!