JavaScript - Storage API: Hướng dẫn cho người mới bắt đầu
Xin chào các ngôi sao lập trình tương lai! ? Hôm nay, chúng ta sẽ khám phá thế giới của JavaScript's Storage API. Đừng lo nếu bạn chưa từng viết một dòng mã nào trước đây - tôi sẽ là người bạn đồng hành thân thiện của bạn trong hành trình thú vị này. Hãy bắt đầu nào!
Web Storage API là gì?
Hãy tưởng tượng bạn có một cuốn sổ kỳ diệu có thể ghi nhớ những điều cho bạn, ngay cả khi bạn đóng nó lại. Đó chính là những gì Web Storage API làm cho các trang web! Nó là cách để các ứng dụng web lưu trữ dữ liệu trực tiếp trong trình duyệt của bạn.
Hãy nghĩ về nó như thế này: bạn đang chơi một trò chơi trên một trang web và bạn muốn lưu tiến độ của mình. Web Storage API cho phép trò chơi ghi nhớ điểm số của bạn, ngay cả khi bạn đóng trình duyệt và quay lại sau này. Đúng là rất tuyệt vời phải không?
Có hai loại lưu trữ web chính:
- localStorage
- sessionStorage
Hãy cùng khám phá chi tiết từng loại này.
Đối tượng Window localStorage
localStorage là gì?
localStorage giống như một két lưu trữ持久 cho ứng dụng web của bạn. Nó giữ dữ liệu ngay cả sau khi bạn đóng trình duyệt, làm cho nó trở nên hoàn hảo cho việc lưu trữ dài hạn.
Cách sử dụng localStorage
Dưới đây là một ví dụ đơn giản về cách sử dụng localStorage:
// Lưu trữ dữ liệu
localStorage.setItem("username", "CoolCoder123");
// Lấy dữ liệu
let savedUsername = localStorage.getItem("username");
console.log(savedUsername); // Output: CoolCoder123
// Xóa dữ liệu
localStorage.removeItem("username");
// Xóa tất cả dữ liệu
localStorage.clear();Trong ví dụ này, chúng ta đang lưu trữ một tên người dùng, lấy nó ra, xóa nó và sau đó xóa tất cả dữ liệu. Điều này giống như viết trong cuốn sổ kỳ diệu của bạn, đọc những gì bạn đã viết, xóa một ghi chú cụ thể và sau đó làm sạch toàn bộ cuốn sổ!
Đối tượng Window sessionStorage
sessionStorage là gì?
sessionStorage giống như cousin quên lãng của localStorage. Nó lưu trữ dữ liệu chỉ cho một phiên duy nhất. Khi bạn đóng tab trình duyệt, uff! Dữ liệu biến mất.
Cách sử dụng sessionStorage
Sử dụng sessionStorage rất相似 với localStorage:
// Lưu trữ dữ liệu
sessionStorage.setItem("tempScore", "1000");
// Lấy dữ liệu
let currentScore = sessionStorage.getItem("tempScore");
console.log(currentScore); // Output: 1000
// Xóa dữ liệu
sessionStorage.removeItem("tempScore");
// Xóa tất cả dữ liệu
sessionStorage.clear();Điều này rất tốt cho việc lưu trữ thông tin tạm thời, như điểm số của một trò chơi mà bạn chỉ cần khi người chơi đang chơi.
Cookie vs localStorage vs sessionStorage
Bây giờ, hãy so sánh các phương thức lưu trữ này bằng một analogies vui vẻ:
- Cookies giống như những note dính. Chúng nhỏ, có thể đọc bởi máy chủ và có ngày hết hạn.
- localStorage giống như một日记. Nó lưu trữ rất nhiều thông tin và giữ nó trong một thời gian dài.
- sessionStorage giống như một bảng trắng. Nó giữ thông tin tạm thời và bị xóa khi bạn xong.
Dưới đây là bảng so sánh tiện lợi:
| Tính năng | Cookies | localStorage | sessionStorage |
|---|---|---|---|
| Dung lượng | ~4KB | ~5MB | ~5MB |
| Hết hạn | Đặt手动 | Không bao giờ | Khi đóng tab |
| Truy cập máy chủ | Có | Không | Không |
| Gửi kèm yêu cầu | Có | Không | Không |
Properties và Methods của Đối tượng Lưu trữ
Cả localStorage và sessionStorage chia sẻ cùng một phương thức và thuộc tính. Hãy cùng khám phá chúng:
Thuộc tính
-
length: Trả về số lượng mục lưu trữ.
console.log(localStorage.length);Phương thức
-
setItem(key, value): Thêm một cặp key/value vào lưu trữ. -
getItem(key): Lấy giá trị liên kết với key cho trước. -
removeItem(key): Xóa mục liên kết với key cho trước. -
clear(): Xóa tất cả mục từ lưu trữ. -
key(index): Trả về tên của key tại chỉ số xác định.
Dưới đây là ví dụ sử dụng tất cả các phương thức này:
// Sử dụng setItem
localStorage.setItem("fruit", "apple");
localStorage.setItem("vegetable", "carrot");
// Sử dụng getItem
console.log(localStorage.getItem("fruit")); // Output: apple
// Sử dụng key
console.log(localStorage.key(0)); // Output: fruit (hoặc vegetable, thứ tự không đảm bảo)
// Sử dụng length
console.log(localStorage.length); // Output: 2
// Sử dụng removeItem
localStorage.removeItem("vegetable");
// Sử dụng clear
localStorage.clear();Và thế là bạn đã迈出了进入网页存储世界的第一步。 Hãy nhớ rằng, thực hành làm cho hoàn hảo. Thử tạo một trang web đơn giản và thử nghiệm các phương thức lưu trữ này. Có lẽ tạo một trò chơi nhỏ ghi nhớ điểm số cao của người chơi bằng localStorage?
Trước khi tôi rời đi, đây là một câu đùa lập trình nhỏ cho bạn:
Tại sao các lập trình viên thích chế độ tối? Bởi vì ánh sáng thu hút sâu! ??
Chúc bạn lập trình vui vẻ, và hãy nhớ - mỗi chuyên gia từng là một người mới bắt đầu. Hãy tiếp tục học hỏi, tiếp tục lập trình và quan trọng nhất, hãy vui vẻ!
Credits: Image by storyset