Skip to content

Instantly share code, notes, and snippets.

@vancuong4662
Last active December 2, 2025 13:12
Show Gist options
  • Select an option

  • Save vancuong4662/25ee56e2f8a4ba4715b35e41d73c82ff to your computer and use it in GitHub Desktop.

Select an option

Save vancuong4662/25ee56e2f8a4ba4715b35e41d73c82ff to your computer and use it in GitHub Desktop.
Mẫu code làm quen localstorage - B3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thử nghiệm bộ nhớ</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<style>
.noi-dung-web {
width: 60%;
margin: 100px auto;
}
</style>
</head>
<body class="w3-light-gray noi-dung-web">
<div class="w3-card-4 w3-round-large w3-white w3-padding">
<p>Tôi đang có <span id="so-luong">10</span> con mèo</p>
<button class="w3-button w3-round-large w3-green" onclick="tang()">Tăng</button>
<button class="w3-button w3-round-large w3-red" onclick="giam()">Giảm</button>
</div>
<script>
function capNhatSoLuong() {
var soLuongHienTai = localStorage.getItem("so-luong-meo");
if (soLuongHienTai == null) {
soLuongHienTai = 10;
localStorage.setItem("so-luong-meo", soLuongHienTai);
} else {
soLuongHienTai = parseInt(soLuongHienTai);
}
document.getElementById("so-luong").innerText = soLuongHienTai;
}
window.onload = capNhatSoLuong();
function tang() {
var soLuongHienTai = parseInt(document.getElementById("so-luong").innerText);
var soLuongCapNhat = soLuongHienTai + 1;
localStorage.setItem("so-luong-meo", soLuongCapNhat);
document.getElementById("so-luong").innerText = soLuongCapNhat;
}
function giam() {
var soLuongHienTai = parseInt(document.getElementById("so-luong").innerText);
var soLuongCapNhat = soLuongHienTai - 1;
localStorage.setItem("so-luong-meo", soLuongCapNhat);
document.getElementById("so-luong").innerText = soLuongCapNhat;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment