Ứng dụng web có thể trở nên phức tạp rất nhanh. Một điều tôi học được trong thời gian làm nhà phát triển là có rất nhiều thứ bạn có thể làm với JavaScript thuần túy nếu bạn cho nó cơ hội.
API localStorage là một hàm tích hợp mạnh mẽ loại bỏ nhu cầu sử dụng cơ sở dữ liệu cho các ứng dụng đơn giản không cần máy chủ. Chúng ta có thể dùng API này để lưu trữ các mẩu dữ liệu cục bộ có thể được truy cập bởi ứng dụng của chúng ta.
Trong hướng dẫn này, chúng ta sẽ nói về cách sử dụng phương thức localStorage trong JavaScript. Chúng ta sẽ chạy qua ví dụ cách dùng localStorage để lưu nội dung biểu mẫu để dùng sau trên trang web. Hãy bắt đầu!
localStorage là gì?
localStorage là một phần của API lưu trữ web (web storage API). API này cho phép bạn lưu trữ dữ liệu bên trong trình duyệt của người dùng mà ứng dụng của bạn có thể truy cập.
API lưu trữ hữu ích vì nó có nghĩa là bạn không cần gửi mọi mẩu dữ liệu về phiên của người dùng đến cơ sở dữ liệu. Nếu người dùng bật chế độ tối trên trang của bạn, bạn có thể theo dõi đó ở phía client; nếu người dùng lưu biểu mẫu để sau, bạn không cần lưu biểu mẫu nửa chừng trong cơ sở dữ liệu.
Có hai loại lưu trữ web. localStorage là dữ liệu sẽ ở lại trong cửa sổ trình duyệt của người dùng ngay cả sau khi họ đóng tab trình duyệt. Khác với cookie, dữ liệu localStorage là dữ liệu không có ngày hết hạn. sessionStorage là dữ liệu kéo dài đến khi phiên hết hạn, nghĩa là cho đến khi trình duyệt bị đóng.
Trong bài viết này, chúng ta tập trung vào đối tượng localStorage. Tuy nhiên, bạn có thể thay thế bằng sessionStorage vì cả hai dùng cùng cú pháp.
Cách sử dụng localStorage
Trước khi đi sâu vào ví dụ, hãy đi qua các phương thức do localStorage cung cấp.
Để tạo mục localStorage, chúng ta dùng phương thức setItem():
localStorage.setItem("name", "Linda Carlton"); console.log(localStorage);
Mã trả về:
{ name: "Linda Carlton", length: 1 }
localStorage lưu trữ các mục theo cặp key:value. Trong ví dụ, chúng ta tạo mục "name". Mục này có giá trị "Linda Carlton".
Chúng ta dùng câu lệnh console.log() để in nội dung localStorage ra console để đảm bảo giá trị đã được thêm.
Bạn có thể dùng cùng mã để cập nhật giá trị lưu trong localStorage.
Để truy xuất giá trị cụ thể từ localStorage, bạn dùng phương thức getItem():
localStorage.getItem("name");
Mã trả về:
Linda Carlton.
Có hai phương thức để xóa dữ liệu từ localStorage:
- removeItem(): Xóa một mục đơn lẻ từ localStorage
- clear(): Xóa mọi mục trong localStorage()
Nếu muốn xóa mục "name" khỏi local storage, dùng mã này:
localStorage.removeItem(name); console.log(localStorage);
Mã trả về:
{ length: 0 }
Lưu ý ngay cả khi xóa localStorage, vẫn còn một mục lưu trữ: length. Điều này cho biết số mục lưu trong localStorage. Bây giờ đã xóa mục "name", không còn gì lưu trong localStorage.
Cũng quan trọng lưu ý localStorage chỉ lưu trữ chuỗi.
Xây dựng tính năng lưu biểu mẫu dùng localStorage
Chúng ta đều từng trên các trang yêu cầu điền biểu mẫu dài. Trừ khi rất quan trọng, tôi thích quay lại biểu mẫu sau. Đó là lý do nhiều trang có tính năng "lưu biểu mẫu" theo dõi chi tiết biểu mẫu cho sau.
Mặc dù một số có thể theo dõi dữ liệu trong cơ sở dữ liệu, bạn có thể làm phiên bản nhẹ dùng phương thức localStorage.
Tạo Front End
Chúng ta sẽ tạo biểu mẫu phản hồi khách hàng cho tiệm trà địa phương, The Little Tea House. Bước đầu tạo front-end cho ứng dụng web. Tạo file index.html và dán mã sau:
<!DOCTYPE html> <html> <head> <title>The Little Tea House Feedback</title> <link rel="stylesheet" href="./styles.css" /> </head> <body> <div> <h1>The Little Tea House: Customer Feedback</h1> <p>How was your experience at The Little Tea House? We'd love to learn more!</p> <form> <label for="name">Name: </label> <input id="name" type="text" /><br /><br /> <label for="email">Email: </label> <input id="email" type="email" /><br /><br /> <label for="feedback">Message: </label><br /><br /> <textarea id="feedback"></textarea><br /><br /> <button id="saveButton">Save form</button> <button id="retrieveButton">Retrieve form</button> </form> </div> <script src="./form.js"></script> </body> </html>
Mã này tạo trang HTML cơ bản với các trường biểu mẫu:
div { margin-left: 15vw; margin-right: 15vw; background-color: lightblue; padding: 20px; }
Quay lại trang web và tải lại trang:
Như bạn thấy, biểu mẫu hiện ở giữa trang và có nền xanh. Trông tuyệt! Bây giờ sẵn sàng viết JavaScript cho trang web này.
Tạo tính năng lưu biểu mẫu
Bước tiếp theo thu thập giá trị lưu trong các trường biểu mẫu. Từ trên, các trường biểu mẫu có ID:
- name (trường Tên)
- email (trường Email)
- feedback (trường Tin nhắn)
Chúng ta dùng ID này để lấy giá trị từ từng trường. Tạo file form.js và dán mã:
var nameField = document.getElementById("name"); var emailField = document.getElementById("email"); var feedbackField = document.getElementById("feedback");
Chúng ta khai báo là biến "var" vì sẽ thay đổi giá trị sau. Chúng ta cũng lấy nút để làm cho chúng có thể nhấp sau:
var saveButton = document.getElementById("saveButton"); var retrieveButton = document.getElementById("retrieveButton");
Bước tiếp theo tạo hàm lưu các giá trị này vào localStorage khi nút được nhấn. Làm bằng mã sau:
function saveResponses() { localStorage.setItem("name", nameField.value); localStorage.setItem("email", emailField.value); localStorage.setItem("feedback", feedbackField.value); }
Mã này không chạy cho đến khi hàm saveResponses() được gọi. Làm sao để điều đó xảy ra? Chúng ta phải liên kết nó với nút. Mã này cho phép gọi hàm khi nút được nhấp:
saveButton.addEventListener("click", saveResponses);
Bây giờ khi nhấn nút "Lưu biểu mẫu", phản hồi sẽ lưu trong localStorage.
Nhưng lưu dữ liệu vô ích nếu không truy xuất được. Chúng ta viết hàm truy xuất dữ liệu khi nút "Truy xuất biểu mẫu" được nhấp:
function retrieveResponses() { nameField.value = localStorage.getItem("name"); emailField.value = localStorage.getItem("email"); feedbackField.value = localStorage.getItem("feedback"); } retrieveButton.addEventListener("click", function(e) { e.preventDefault(); retrieveResponses(); });
Tuyệt! Mã này đặt giá trị mỗi trường biểu mẫu thành giá trị lưu trong localStorage nếu có. Chạy mã xem sao:
Biểu mẫu trông giống nhau. Hãy chèn giá trị vào biểu mẫu và nhấn "Lưu biểu mẫu". Điều này lưu phản hồi của bạn.
Bây giờ, tải lại trang và nhấn "Truy xuất biểu mẫu". Bạn sẽ thấy phản hồi biểu mẫu đã lưu! Thông tin trong localStorage sẽ tồn tại ngay cả khi đóng tab. Nó không bị xóa khi đóng trình duyệt. Chúng ta đã làm được!
Các phản hồi biểu mẫu sẽ được lưu cho đến khi bạn lưu lại biểu mẫu hoặc xóa cache.
Lưu ý: Không dùng kỹ thuật này để lưu thông tin nhạy cảm. Tất cả dữ liệu trong localStorage lưu dưới dạng văn bản thuần túy, nghĩa là bất kỳ người dùng nào đọc nó đều có thể truy cập.
Kết luận
Phương thức localStorage cho phép lưu trữ dữ liệu cục bộ trong JavaScript. Đối với ứng dụng đơn giản như danh sách việc cần làm, lưu tùy chọn người dùng, hoặc lưu dữ liệu biểu mẫu người dùng (không bao gồm dữ liệu nhạy cảm), nó tốt hơn dùng cơ sở dữ liệu. localStorage dễ thiết lập, dễ dùng và 100% JavaScript thuần túy.
Bây giờ bạn đã sẵn sàng dùng phương thức localStorage như một nhà phát triển JavaScript chuyên gia!