Trong những ngày đầu của internet, bạn cần một máy chủ để lưu trữ dữ liệu. Nhưng ngày nay, thông qua LocalStorage, bạn có thể lưu trữ dữ liệu trên trình duyệt và ứng dụng mà không cần giao tiếp với máy chủ phụ trợ
Trong bài viết này, bạn sẽ tìm hiểu về các ứng dụng lý thuyết và thực tế của LocalStorage trong JavaScript
Hãy nói về lưu trữ web
Trước khi chúng tôi bắt đầu thỏa thuận thực sự, hãy xem định nghĩa về lưu trữ web. Lưu trữ web là một trong những tính năng tuyệt vời của HTML5 cho phép các ứng dụng web lưu trữ dữ liệu cục bộ trong trình duyệt của người dùng
Hai hình thức lưu trữ web phổ biến nhất là LocalStorage và Session Storage. Sự khác biệt chính giữa hai hình thức lưu trữ web này là dữ liệu được lưu trong
//Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
1 không bao giờ rời khỏi trình duyệt và vẫn ở đó cho đến khi bạn xóa nó một cách rõ ràng. Ngược lại, dữ liệu được lưu trữ trong //Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
2 sẽ bị xóa sau khi đóng tab/cửa sổ trình duyệtBộ nhớ cục bộ là gì?
Như đã đề cập trước đó, LocalStorage là một dạng lưu trữ web do trình duyệt cung cấp, cho phép các ứng dụng web lưu trữ dữ liệu cục bộ trong trình duyệt của người dùng mà không có ngày hết hạn. Tại đây, dữ liệu được lưu trữ sẽ vẫn khả dụng ngay cả khi bạn đóng tab/cửa sổ trình duyệt
Lưu ý rằng dữ liệu được lưu trữ trong LocalStorage chỉ được lưu trữ trên trình duyệt của người dùng trên thiết bị mà họ đã sử dụng để truy cập trang web. Do đó, người dùng không thể truy cập dữ liệu được lưu trữ nếu họ truy cập lại cùng một trang sau đó bằng một trình duyệt khác hoặc trên một thiết bị khác
Các trường hợp sử dụng LocalStorage
Sau đây trình bày một số trường hợp sử dụng hàng ngày của LocalStorage
1. Lưu trữ dữ liệu biểu mẫu được gửi một phần
Nếu người dùng điền vào một biểu mẫu dài trực tuyến, LocalStorage có thể là một tài nguyên hữu ích để lưu trữ thông tin đầu vào của người dùng. Trong trường hợp đó, ngay cả khi internet bị ngắt kết nối giữa lúc điền vào biểu mẫu và gửi biểu mẫu, người dùng sẽ không bị mất dữ liệu nhập và có thể tiếp tục từ nơi họ đã dừng lại
2. Bộ nhớ đệm
Bộ nhớ đệm đề cập đến việc lưu trữ dữ liệu, chẳng hạn như chi tiết đăng nhập trên thiết bị của người dùng để các yêu cầu về dữ liệu đó trong tương lai có thể được phục vụ nhanh hơn. Bạn có thể sử dụng LocalStorage để lưu trữ toàn bộ trang web để người dùng vẫn có thể truy cập trang web ngay cả khi họ ngoại tuyến
3. Cơ sở dữ liệu cho các ứng dụng cơ bản
Như đã đề cập trước đó, ban đầu chỉ có thể lưu trữ dữ liệu bằng cách giao tiếp với cơ sở dữ liệu thông qua chương trình phụ trợ. Nhưng giờ đây, với LocalStorage, bạn có thể lưu trữ dữ liệu trên frontend mà không cần đến cơ sở dữ liệu. Do đó, LocalStorage đôi khi có thể đóng vai trò là cơ sở dữ liệu "nhỏ" cho các ứng dụng cơ bản
Cách truy cập LocalStorage
Truy cập LocalStorage khá đơn giản và chỉ mất vài bước
- Truy cập bất kỳ trang web hoặc ứng dụng web nào và mở bảng điều khiển trình duyệt bằng cách nhấn F12 trên bàn phím
- Tiếp theo, nhấp vào tab Ứng dụng và trong menu bên trái, bạn sẽ thấy
1 dưới tab Lưu trữ như hình bên dưới//Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem["user-info", JSON.stringify[user]]; //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem["names", JSON.stringify[names]];
- Nhấp vào danh sách thả xuống
1 và nhấp thêm vào a/mục thả xuống.//Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem["user-info", JSON.stringify[user]]; //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem["names", JSON.stringify[names]];
Như có thể thấy, có hai cột,
//Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
5 và //Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
6. Đây là nơi LocalStorage lưu trữ mọi dữ liệu bạn lưu vào đóCách sử dụng bộ nhớ cục bộ
Bạn có thể sử dụng các phương pháp sau để quản lý dữ liệu trong LocalStorage
MethodDescription
//Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
7Để lưu trữ dữ liệu trong LocalStorage. //Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
8Để lấy hoặc truy xuất dữ liệu từ LocalStorage//Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
9Để xóa dữ liệu khỏi LocalStorage bằng cách sử dụng khóalocalStorage.getItem["user-info"];
0Để truy xuất dữ liệu từ LocalStorage tại một chỉ mục được chỉ địnhthiết lập các mục[ ]
Phương pháp này được sử dụng để lưu trữ dữ liệu trong LocalStorage. Nó chấp nhận một khóa làm đối số đầu tiên và sau đó là một giá trị làm đối số thứ hai
Hãy thêm dữ liệu vào
//Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
1 bằng cách sử dụng như saulocalStorage.setItem["name", "Mandy"];
// Here, `name` is the key and `Mandy` is the value
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Như đã đề cập trước đó, LocalStorage lưu trữ dữ liệu dưới dạng chuỗi, vì vậy nếu bạn muốn lưu dữ liệu như đối tượng và mảng, bạn cần chuyển đổi chúng thành chuỗi bằng phương thức
localStorage.getItem["user-info"];
2Hãy xem cách nó hoạt động
//Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
getItem[]
Sử dụng phương pháp
//Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
8 để lấy dữ liệu từ LocalStorage. Phương pháp này chấp nhận một tham số duy nhất, đó là //Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
5 được sử dụng khi lưu dữ liệuVí dụ, để lấy dữ liệu như đối tượng
localStorage.getItem["user-info"];
5 ở trên, bạn sẽ sử dụng câu lệnh saulocalStorage.getItem["user-info"];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đoạn mã trên sẽ trả về một chuỗi
localStorage.getItem["user-info"];
6 như hình bên dưới"{name:"Mandy", age:"23"}"
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sau đó, bạn nên chuyển đổi nó thành một đối tượng bằng phương pháp
localStorage.getItem["user-info"];
7JSON.parse[localStorage.getItem['user-info']];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
loại bỏ mục[]
Sử dụng phương pháp
//Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
9 để xóa dữ liệu khỏi LocalStorage. Phương pháp này chấp nhận một //Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem["user-info", JSON.stringify[user]];
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem["names", JSON.stringify[names]];
5 như một tham sốVí dụ: bạn sẽ sử dụng câu lệnh sau để xóa đối tượng
localStorage.getItem["user-info"];
5 khỏi LocalStoragelocalStorage.removeItem["user-info"];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chìa khóa[]
Sử dụng phương pháp
"{name:"Mandy", age:"23"}"
1 để truy xuất dữ liệu từ LocalStorage, trong đó "{name:"Mandy", age:"23"}"
2 đại diện cho dữ liệu "{name:"Mandy", age:"23"}"
3 bạn muốn truy xuấtlocalStorage.key[2];
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
thông thoáng[]
Sử dụng phương pháp
"{name:"Mandy", age:"23"}"
4 để xóa hoặc xóa tất cả dữ liệu khỏi LocalStorage tại một trường hợp cụ thểlocalStorage.clear[]
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Dự án
Bây giờ bạn đã tìm hiểu về các phương pháp chính được sử dụng để quản lý dữ liệu trong LocalStorage, hãy bắt tay vào tạo một ứng dụng web nơi người dùng có thể
- Lưu dữ liệu vào LocalStorage
- Truy xuất dữ liệu
- Xóa/Xóa dữ liệu bằng cách sử dụng
5//Storing objects in LocalStorage const user = { name: "Mandy", age: 23, }; localStorage.setItem["user-info", JSON.stringify[user]]; //Storing arrays/lists in LocalStorage const names = ["John", "Jake", "Vanessa"]; localStorage.setItem["names", JSON.stringify[names]];
- Và cũng xóa tất cả dữ liệu khỏi LocalStorage
Hãy bắt đầu bằng cách tạo một thư mục mới và mở nó trong trình chỉnh sửa mã. Tiếp theo, tạo ba tệp,
"{name:"Mandy", age:"23"}"
6 , "{name:"Mandy", age:"23"}"
7 và "{name:"Mandy", age:"23"}"
8Hãy viết mã
Tệp
"{name:"Mandy", age:"23"}"
6 sẽ chứa đánh dấu HTML cho ứng dụng web. Mã HTML bao gồm một biểu mẫu có nhiều trường nhập liệu khác nhau với các nút
Local Storage
LocalStorage Application
User
Age
Key
Save user
Enter Key to retrieve user
Retrieve user