Các ứng dụng web có thể trở nên rất phức tạp, rất nhanh chóng. 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 điều bạn có thể làm với JavaScript cũ kỹ nếu bạn có cơ hội.
API localStorage là một chức năng tích hợp mạnh mẽ giúp 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 tôi có thể sử dụng API này để lưu các phần dữ liệu cục bộ mà ứng dụng của chúng tôi có thể truy cập được.
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 tôi sẽ chạy qua một ví dụ về cách sử dụng localStorage để lưu nội dung của biểu mẫu để sử dụng sau này 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. 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ữ rất hữu ích vì nó có nghĩa là bạn không cần phải gửi mọi phần dữ liệu về phiên của người dùng tới cơ sở dữ liệu. Nếu người dùng bật chế độ tối trên trang web của bạn, bạn có thể theo dõi điều đó ở phía máy khách; nếu người dùng lưu biểu mẫu để sử dụng sau này, bạn không cần phải lưu trữ biểu mẫu đã hoàn thành một nửa trong cơ sở dữ liệu của mình.
Có hai loại lưu trữ web. localStorage là dữ liệu sẽ ở 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ông giống như 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 cho đến khi một phiên hết hạn, có nghĩa là cho đến khi trình duyệt bị đóng.
Trong bài đăng này, chúng ta sẽ tập trung vào đối tượng localStorage. Tuy nhiên, bạn có thể thay thế điều này cho sessionStorage vì cả hai đều sử dụng cùng một cú pháp.
Cách sử dụng localStorage
Trước khi đi sâu vào ví dụ của mình, hãy cùng tìm hiểu các phương pháp được cung cấp bởi localStorage.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Để tạo mục nhập localStorage, chúng ta có thể sử dụng một phương thức có tên là setItem() :
localStorage.setItem("name", "Linda Carlton");
console.log(localStorage); Mã của chúng tôi trả về:
{ name: "Linda Carlton", length: 1 }
localStorage lưu trữ các mặt hàng trong các cặp key:value. Trong ví dụ của chúng tôi, chúng tôi đã tạo một mục có tên là “tên”. Mặt hàng này có giá trị "Linda Carlton".
Chúng tôi đã sử dụng console.log() tuyên bố in ra nội dung của localStorage để đảm bảo rằng giá trị của chúng tôi đã được thêm vào.
Bạn có thể sử dụng chính mã này để cập nhật giá trị được lưu trữ trong localStorage.
Để truy xuất một giá trị cụ thể từ localStorage, bạn có thể sử dụng getItem() phương pháp:
localStorage.getItem("name"); Mã của chúng tôi trả về:
Linda Carlton.
Có hai phương pháp bạn có thể sử dụng để xóa dữ liệu khỏi localStorage:
- removeItem ():Xóa một mục khỏi localStorage
- clear ():Xóa mọi mục trong localStorage ()
Nếu chúng tôi muốn xóa mục "tên" của mình khỏi bộ nhớ cục bộ, chúng tôi có thể sử dụng mã này:
localStorage.removeItem(name); console.log(localStorage);
Mã của chúng tôi trả về:
{ length: 0 }
Lưu ý rằng mặc dù chúng tôi đã xóa localStorage nhưng vẫn còn một mục được lưu trữ:chiều dài. Điều này cho chúng ta biết có bao nhiêu mục được lưu trữ trong localStorage. Bây giờ chúng tôi đã xóa mục nhập "tên", không có gì được lưu trữ trong localStorage.
Cũng cần lưu ý rằng localStorage chỉ có thể lưu trữ các chuỗi.
Xây dựng tính năng lưu biểu mẫu bằng localStorage
Tất cả chúng ta đã ở trên một số trang web yêu cầu chúng ta điền vào một biểu mẫu dài. Trừ khi có điều gì đó thực sự quan trọng, tôi thích có thể quay trở lại hình thức đó sau này. Đó là lý do tại sao rất nhiều trang web có tính năng "lưu biểu mẫu" để theo dõi chi tiết biểu mẫu của bạn cho sau này.
Mặc dù một số trong số này có thể theo dõi dữ liệu của bạn trong cơ sở dữ liệu, nhưng bạn có thể tạo một phiên bản nhẹ bằng phương pháp localStorage.
Tạo Giao diện Người dùng
Chúng tôi sẽ tạo một biểu mẫu phản hồi của khách hàng cho một quán trà ở địa phương, The Little Tea House. Bước đầu tiên của chúng tôi là tạo giao diện người dùng cho ứng dụng web của chúng tôi. Tạo một tệp có tên là index.html và dán vào 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 một trang HTML cơ bản với các trường biểu mẫu của chúng tôi:
Trang web của chúng tôi hiện có mọi thứ mà nó cần, nhưng chúng tôi sẽ thêm vào một số kiểu để làm cho nó đẹp hơn về mặt thẩm mỹ. Tạo một tệp có tên styles.css và dán vào mã này:
div {
margin-left: 15vw;
margin-right: 15vw;
background-color: lightblue;
padding: 20px;
}
Bây giờ quay lại trang web và làm mới trang:
Như bạn có thể thấy, biểu mẫu của chúng tôi hiện xuất hiện ở giữa trang web của chúng tôi và có nền màu xanh lam. No trông tuyệt! Bây giờ chúng tôi đã sẵn sàng để bắt đầu 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 của chúng tôi là thu thập các giá trị được lưu trữ trong các trường biểu mẫu của chúng tôi. Từ phía trên, các trường biểu mẫu của chúng tôi có các ID:
- tên (trường Tên của chúng tôi)
- email (trường Email của chúng tôi)
- phản hồi (trường Tin nhắn của chúng tôi)
Chúng tôi có thể sử dụng các ID này để truy xuất các giá trị từ mỗi trường biểu mẫu của chúng tôi. Tạo một tệp có tên là form.js và dán vào mã này:
var nameField = document.getElementById("name");
var emailField = document.getElementById("email");
var feedbackField = document.getElementById("feedback"); Chúng tôi đang khai báo những biến này là biến “var” vì chúng tôi sẽ thay đổi giá trị của chúng sau này. Chúng tôi cũng sẽ truy xuất các nút của mình để có thể làm cho chúng có thể nhấp vào sau trong hướng dẫn:
var saveButton = document.getElementById("saveButton");
var retrieveButton = document.getElementById("retrieveButton"); Bước tiếp theo của chúng ta là tạo một hàm lưu các giá trị này vào localStorage khi nút của chúng ta được nhấn. Chúng tôi sẽ thực hiện việc này bằng mã sau:
function saveResponses() {
localStorage.setItem("name", nameField.value);
localStorage.setItem("email", emailField.value);
localStorage.setItem("feedback", feedbackField.value);
}
Mã này sẽ không chạy cho đến khi saveResponses() của chúng tôi hàm được gọi. Vì vậy, làm thế nào để chúng tôi làm cho điều này xảy ra? Chúng tôi phải liên kết nó với nút của chúng tôi. Mã này cho phép chúng tôi gọi hàm của mình khi nhấp vào nút của chúng tôi:
saveButton.addEventListener("click", saveResponses);
Bây giờ khi chúng tôi nhấn nút “Lưu biểu mẫu”, câu trả lời của chúng tôi sẽ được lưu trữ trong localStorage.
Nhưng việc lưu trữ dữ liệu này cũng chẳng ích gì nếu chúng tôi không thể truy xuất. Chúng tôi sẽ viết một hàm truy xuất dữ liệu này khi nhấp vào nút “Truy xuất biểu mẫu”:
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 quá! Mã này đặt giá trị của từng trường biểu mẫu của chúng tôi thành giá trị được lưu trữ trong localStorage nếu có sẵn giá trị. Bây giờ, hãy chạy mã của chúng tôi và xem điều gì sẽ xảy ra:
Hình thức của chúng tôi trông giống nhau. Cố gắng chèn một số giá trị vào biểu mẫu và nhấn nút “Lưu biểu mẫu”. Điều này sẽ lưu các câu trả lời của bạn vào biểu mẫu.
Bây giờ, hãy làm mới trang của bạn và nhấn “Truy xuất biểu mẫu”. Bạn sẽ nhận thấy rằng các câu trả lời biểu mẫu của bạn đã được lưu! Thông tin trong localStorage sẽ vẫn tồn tại ngay cả khi chúng ta đóng tab. Nó sẽ không bị xóa khi trình duyệt bị đóng. Chúng ta làm được rồi!
Các phản hồi biểu mẫu này sẽ được lưu cho đến khi bạn lưu lại biểu mẫu hoặc xóa bộ nhớ cache của mình.
Lưu ý:Bạn không nên sử dụng kỹ thuật này để lưu trữ thông tin nhạy cảm. Tất cả dữ liệu trong localStorage được lưu trữ dưới dạng văn bản thuần túy, có nghĩa là bất kỳ người dùng nào đọc nó cũng có thể truy cập được.
Kết luận
Phương thức localStorage cho phép bạn lưu trữ dữ liệu cục bộ trong JavaScript. Đối với các ứng dụng đơn giản như danh sách việc cần làm, lưu tùy chọn của người dùng hoặc lưu dữ liệu biểu mẫu của người dùng (không bao gồm dữ liệu nhạy cảm), sẽ tốt hơn nhiều so với sử dụng cơ sở dữ liệu. localStorage rất dễ cài đặt, dễ sử dụng và là 100% JavaScript đơn giản.
Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng phương thức localStorage như một nhà phát triển JavaScript chuyên nghiệp!