HTML - Lưu trữ Web: Cửa ngõ đến Lưu trữ Bên.Client

Xin chào các bạn future web developers! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của HTML Web Storage. Như một người giáo viên máy tính gần gũi, tôi rất vui được hướng dẫn các bạn qua khía cạnh quan trọng này của phát triển web hiện đại. Vậy, hãy lấy饮料 yêu thích của bạn, ngồi thoải mái, và cùng chúng ta nhảy vào!

HTML - Web Storage

Lưu trữ Web là gì?

Trước khi chúng ta đi vào chi tiết, hãy hiểu về Lưu trữ Web. Hãy tưởng tượng bạn đang xây dựng một nhà treo và cần một nơi để lưu trữ công cụ của bạn. Lưu trữ Web giống như một compartiment bí mật trong nhà treo của bạn nơi bạn có thể giữ thông tin quan trọng để sử dụng sau này. Trong thuật ngữ phát triển web, nó là một cách để lưu trữ dữ liệu trên bên client (tức là trình duyệt của người dùng) mà không cần sử dụng cookie.

Loại Lưu trữ Web

Bây giờ, hãy khám phá hai loại Lưu trữ Web chính:

Session Storage
Local Storage

Hãy nghĩ về chúng như hai ngăn kéo khác nhau trong compartiment bí mật của bạn. Chúng phục vụ cùng một mục đích nhưng có một số khác biệt quan trọng. Hãy cùng phân tích:

Session Storage

Session Storage giống như một cuốn sổ tay tạm thời. Nó lưu trữ dữ liệu cho một phiên, và khi bạn đóng tab hoặc cửa sổ trình duyệt, ouch! Dữ liệu biến mất như魔法.

Local Storage

Local Storage, mặt khác, giống như một日记. Thông tin bạn viết ở đây sẽ ở lại ngay cả khi bạn đóng trình duyệt. Nó sẽ chờ bạn khi bạn quay lại, giống như日记 đáng tin cậy của bạn trên bàn bên giường.

Ví dụ về Lưu trữ Web HTML

Hãy c rolled up our sleeves và bắt đầu với một số mã! Chúng ta sẽ bắt đầu với Session Storage và sau đó chuyển sang Local Storage.

Ví dụ Session Storage

<!DOCTYPE html>
<html>
<head>
<title>Session Storage Fun</title>
</head>
<body>
<h1>Welcome to the Session Storage Party!</h1>
<button onclick="saveData()">Save My Name</button>
<button onclick="loadData()">What's My Name?</button>

<script>
function saveData() {
sessionStorage.setItem("userName", "Alice");
alert("Name saved!");
}

function loadData() {
var name = sessionStorage.getItem("userName");
if (name) {
alert("Your name is " + name);
} else {
alert("I don't know your name yet!");
}
}
</script>
</body>
</html>

Hãy phân tích này:

Chúng ta có hai nút: một để lưu dữ liệu và một để tải dữ liệu.
Hàm saveData() sử dụng sessionStorage.setItem() để lưu tên "Alice".
Hàm loadData() sử dụng sessionStorage.getItem() để lấy tên đã lưu.
Nếu bạn đóng tab và mở lại nó, tên sẽ biến mất. Đó là Session Storage!

Ví dụ Local Storage

Bây giờ, hãy điều chỉnh ví dụ của chúng ta để sử dụng Local Storage:

<!DOCTYPE html>
<html>
<head>
<title>Local Storage Adventure</title>
</head>
<body>
<h1>Welcome to the Local Storage Kingdom!</h1>
<button onclick="saveData()">Remember My Favorite Color</button>
<button onclick="loadData()">What's My Favorite Color?</button>

<script>
function saveData() {
localStorage.setItem("favoriteColor", "Blue");
alert("Color saved!");
}

function loadData() {
var color = localStorage.getItem("favoriteColor");
if (color) {
alert("Your favorite color is " + color);
} else {
alert("You haven't told me your favorite color yet!");
}
}
</script>
</body>
</html>

Cấu trúc tương tự, nhưng lưu ý rằng chúng ta đang sử dụng localStorage thay vì sessionStorage. Sự khác biệt chính? Đóng trình duyệt, uống một tách cà phê, quay lại, và màu yêu thích của bạn vẫn sẽ ở đó!

Xóa Lưu trữ Web

Bây giờ, giả sử bạn muốn dọn dẹp lưu trữ của mình? Đó giống như dọn dẹp mùa xuân cho ứng dụng web của bạn! Dưới đây là cách bạn có thể làm điều đó:

// Remove a specific item
sessionStorage.removeItem("userName");
localStorage.removeItem("favoriteColor");

// Clear all items
sessionStorage.clear();
localStorage.clear();

Phương thức Lưu trữ Web

Hãy tóm tắt các phương thức chúng ta đã học trong một bảng nhỏ gọn:

Phương thức	Mô tả
setItem(key, value)	Thêm một cặp key/value vào lưu trữ
getItem(key)	Truy xuất một giá trị bằng key
removeItem(key)	Xóa một mục bằng key
clear()	Xóa tất cả các mục từ lưu trữ

Lý do chọn Lưu trữ Web thay vì Cookie

Bây giờ, bạn có thể tự hỏi, "Tại sao phải phiền phức với Lưu trữ Web khi chúng ta đã có cookie?" Đó là một câu hỏi tuyệt vời! Hãy để tôi đưa ra một số lý do thuyết phục:

Dung lượng: Lưu trữ Web có thể giữ nhiều dữ liệu hơn cookie. Nó giống như nâng cấp từ một hộp nhỏ lên một tủ lớn!
Bảo mật: Dữ liệu Lưu trữ Web không được gửi với mỗi yêu cầu HTTP, khác với cookie. Nó giống như giữ日记 ở nhà thay vì mang nó khắp nơi.
Dễ sử dụng: Lưu trữ Web có một API đơn giản và trực quan. Nó giống như sử dụng một điện thoại thông minh thay vì một điện thoại quay số cũ.
Hiệu suất: Lưu trữ dữ liệu locally có thể làm cho ứng dụng web của bạn nhanh hơn. Nó giống như có một tủ lưu trữ trong lớp học thay vì chạy đến phòng lưu trữ mỗi khi bạn cần thứ gì.

Kết luận

Và thế là chúng ta đã cùng nhau hành trình qua thế giới của HTML Web Storage, từ những vùng đất tạm thời của Session Storage đến những vương quốc bền bỉ của Local Storage. Chúng ta đã học cách lưu, truy xuất và xóa dữ liệu, và tại sao Lưu trữ Web thường là lựa chọn tốt hơn cookie.

Nhớ rằng, như bất kỳ công cụ mạnh mẽ nào, hãy sử dụng Lưu trữ Web một cách khôn ngoan. Không lưu trữ thông tin nhạy cảm như mật khẩu hoặc số thẻ tín dụng. Nó được thiết kế để cải thiện trải nghiệm người dùng, không phải để bảo vệ Fort Knox!

Khi bạn tiếp tục hành trình phát triển web của mình, bạn sẽ tìm thấy vô số cách sáng tạo để sử dụng Lưu trữ Web. Có thể bạn sẽ sử dụng nó để ghi nhớ các tùy chọn người dùng, lưu tiến độ trò chơi, hoặc lưu trữ dữ liệu ngoại tuyến. Các khả năng là không giới hạn như trí tưởng tượng của bạn!

Vậy hãy tiến lên, thử nghiệm, và hy vọng rằng ứng dụng web của bạn sẽ luôn thân thiện với người dùng và hiệu suất cao. Chúc các bạn may mắn, các pháp sư web tương lai!

Credits: Image by storyset

Hướng Dẫn Trước:

HTML - WebSocket

Hướng Dẫn Tiếp Theo:

HTML - Sự kiện được gửi từ máy chủ