[Source Code] Tìm hiểu về JS nâng cao - localStorage - C2206L

#vidu.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quan Ly Sinh Vien</title>

    <style type="text/css">
        .container {
            width: 600px;
            margin: 0px auto;
            border: solid 2px blue;
        }

        .container .header {
            background-color: blue;
            padding: 6px;
            color: white;
        }

        .container .body {
            padding:  20px 10px;
        }

        .container .body button {
            background-color: green;
            border: solid 2px green;
            padding: 5px;
            color: white;
            cursor: pointer;
        }

        .container .body button:hover {
            background-color: orange;
            border: solid 2px orange;
        }

        .container .body input {
            width: 95%;
            font-size: 16px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        Dang Ky Tai Khoan Nguoi Dung
    </div>
    <div class="body">
        <form method="post" onsubmit="return saveData();">
            <label>Tai Khoan: </label>
            <input required type="text" name="username" id="username_id">
            <label>Ho Ten: </label>
            <input required type="text" name="fullname" id="fullname_id">
            <label>Email: </label>
            <input required type="email" name="email" id="email_id">
            <label>Ngay Sinh: </label>
            <input required type="date" name="birthday" id="birthday_id">

            <button>Luu</button>
            <button onclick="resetIndex()" type="reset" style="background-color: orange; border: solid 2px orange;">Xoa Form</button>
        </form>
    </div>
</div>

<div class="container" style="margin-top: 30px">
    <div class="header">
        Danh Sach Nguoi Dung
    </div>
    <div class="body">
        <table border="1" style="width: 100%">
            <thead>
                <tr>
                    <th>STT</th>
                    <th>Tai Khoan</th>
                    <th>Ho Ten</th>
                    <th>Email</th>
                    <th>Ngay Sinh</th>
                    <th style="width: 50px"></th>
                    <th style="width: 50px"></th>
                </tr>
            </thead>
            <tbody id="result">
                
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript">
    var fullnameTag = document.getElementById('fullname_id')
    var usernameTag = document.getElementById('username_id')
    var emailTag = document.getElementById('email_id')
    var birthdayTag = document.getElementById('birthday_id')

    var resultTag = document.getElementById('result')

    var stdList = []

    var json = localStorage.getItem('stdList')
    if(json != null && json != "") {
        stdList = JSON.parse(json)
        showData()
    }

    function resetIndex() {
        currentIndex = -1
    }

    function saveData() {
        var fullname = fullnameTag.value
        var username = usernameTag.value
        var email = emailTag.value
        var birthday = birthdayTag.value

        var std = {
            'fullname': fullname,
            'username': username,
            'email': email,
            'birthday': birthday
        }

        if(currentIndex >= 0) {
            stdList[currentIndex] = std
            currentIndex = -1
        } else {
            stdList.push(std)
        }
        
        console.log(stdList)

        showData()

        //Luu thong tin sinh vien vao localStorage
        //B1. Chuyen stdList -> json
        var json = JSON.stringify(stdList)
        localStorage.setItem('stdList', json)

        return false
    }

    function showData() {
        resultTag.innerHTML = ''

        var index = 0
        for(var item of stdList) {
            resultTag.innerHTML += `<tr>
                <td>${index + 1}</td>
                <td>${item.username}</td>
                <td>${item.fullname}</td>
                <td>${item.email}</td>
                <td>${item.birthday}</td>
                <td>
                    <button onclick="editItem(${index})">Edit</button>
                </td>
                <td>
                    <button onclick="deleteItem(${index})">Delete</button>
                </td>
            </tr>`
            index++
        }
    }

    var currentIndex = -1
    function editItem(index) {
        currentIndex = index

        var std = stdList[index]

        fullnameTag.value = std.fullname
        usernameTag.value = std.username
        emailTag.value = std.email
        birthdayTag.value = std.birthday
    }

    function deleteItem(index) {
        option = confirm('Ban co chac chan muon xoa sinh vien nay khong?')
        if(!option) return

        stdList.splice(index, 1)

        showData()

        //Luu thong tin sinh vien vao localStorage
        //B1. Chuyen stdList -> json
        var json = JSON.stringify(stdList)
        localStorage.setItem('stdList', json)
    }
</script>
</body>
</html>

#test.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>JSON & LocalStorage</title>
</head>
<body>
<script type="text/javascript">
	var json = `[{"fullname":"TRAN VAN A","email":"a@gmail.com","address":"Ha Noi"},{"fullname":"TRAN VAN A","email":"a@gmail.com","address":"Ha Noi"},{"fullname":"TRAN VAN A","email":"a@gmail.com","address":"Ha Noi"}]`
	console.log(json)

	var arr = JSON.parse(json)
	console.log(arr)

	for(var item of arr) {
		console.log(item.fullname)
	}

	var str = JSON.stringify(arr)
	console.log(str)

	// LocalStorage -> key & value
	// Luu ten sinh vien "TRAN VAN A" => fullname -> localStorage
	localStorage.setItem('fullname', 'TRAN VAN A')

	// Lay noi dung ra
	var value = localStorage.getItem('fullname')
	console.log(value)

	// Xoa key do di
	localStorage.removeItem('fullname')

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

#data.json

u뚀

[Source Code] Tìm hiểu về JS nâng cao - localStorage - C2206L

#vidu.html

#test.html

#data.json

Tags:

Phản hồi từ học viên

5

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó