API được gọi là Lưu trữ web cung cấp hai cơ chế cơ bản để lưu trữ thông tin trong trình duyệt của người dùng. sessionStorage và localStorage
sessionStorage (mà chúng ta sẽ không đề cập trong bài viết này), hoạt động rất giống với localStorage, nhưng có một điểm khác biệt. nó chỉ giữ dữ liệu đã lưu cho đến khi kết thúc phiên người dùng, tôi. e. cho đến khi trình duyệt của người dùng đóng lại, bao gồm tải lại hoặc khôi phục trang
Ảnh của Markus Spiske trên Bapt
LocalStorage giữ dữ liệu đã lưu ngay cả khi trình duyệt bị đóng và mở lại. Điều này giúp dễ dàng tạo một số hành vi giao diện trong quá trình sử dụng của người dùng. Và rõ ràng, không cần phải nói, nó không phải để lưu dữ liệu nhạy cảm
Cấu trúc lưu trữ dữ liệu khá đơn giản, bao gồm cặp key-value. Một ví dụ
{key: value
}
Để làm việc với dữ liệu này, về cơ bản bạn có thể thực hiện 4 hành động, sử dụng 4 phương pháp
- localStorage.setItem() để tạo cặp khóa-giá trị mới
- localStorage.getItem() để truy xuất giá trị của khóa
- localStorage.removeItem() để xóa một cặp cụ thể
- localStorage.clear() xóa TẤT CẢ các cặp đã lưu cho miền đó
Có một phương pháp gọi là key(). Nhưng tôi sẽ không nói về nó ở đây để đơn giản hóa các giải thích
Mở localStorage trong trình duyệtĐể xem tất cả dữ liệu được lưu trong LocalStorage của trình duyệt, chỉ cần kiểm tra trang, nhấp vào tab Ứng dụng, sau đó, trong thanh bên, nhấp vào Bộ nhớ cục bộ (đường dẫn sử dụng Chrome hoặc các trình duyệt sử dụng công cụ Chromium)
Đang lưu dữ liệu. lưu trữ cục bộ. thiết lập các mục( )
Phương pháp này cho phép bạn lưu các giá trị bên trong localStorage trong trình duyệt của người dùng
Mở bảng điều khiển trong trình duyệt của bạn và thực hiện lệnh sau
localStorage.setItem("name", "Jack Sparrow");Bây giờ hãy mở tab Ứng dụng, đi đến nơi lưu trữ localStorages và nhấp vào “http. //trung bình. com". Bạn sẽ thấy tên của chúng tôi. "Jack Sparrow" đã được cứu
Ghi chú. Lưu ý rằng các giá trị sẽ luôn là một chuỗi. Do đó, dữ liệu sẽ được lưu ở đó cần phải được chuyển đổi thành chuỗi trước khi được lưu. Để làm điều này, chỉ cần sử dụng phương thức JSON.stringify() trước khi chuyển giá trị cho setItem( )
Bây giờ chúng tôi đã lưu giá trị trong trình duyệt của người dùng, bây giờ chúng tôi sẽ truy xuất giá trị đó bằng phương pháp localStorage.setItem("name", "Jack Sparrow");0
Phục hồi dữ liệu. lưu trữ cục bộ. getItem( )Hoạt động giống như setItem(), chúng ta sẽ sử dụng getItem() để lấy giá trị của key đã lưu trước đó. Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng nó để lấy khóa tên mà chúng tôi đã lưu trong ví dụ setItem()
Thực hiện lệnh sau trong bảng điều khiển của bạn để xem giá trị được lưu trữ
localStorage.getItem("name");Xóa dữ liệu. lưu trữ cục bộ. loại bỏ mục( )Sau khi chúng tôi không sử dụng dữ liệu này nữa, bạn nên xóa dữ liệu đó khỏi localStorage để tránh tích lũy dữ liệu không cần thiết
Phương thức localStorage.setItem("name", "Jack Sparrow");1 sẽ xóa khóa bạn đã đặt. Nếu khóa không tồn tại, nó sẽ không làm gì cả
Phương thức localStorage.setItem("name", "Jack Sparrow");1 chỉ xóa khóa (hoặc đối tượng) mà bạn đã yêu cầu. Phương pháp localStorage.setItem("name", "Jack Sparrow");3 xóa TẤT CẢ các khóa trong miền của bạn. Bạn không cần truyền bất kỳ tham số nào
Thực hiện lệnh sau trong bảng điều khiển của bạn để xóa một cặp rồi mở tab ứng dụng để xem nó đã bị xóa chưa
localStorage.removeItem("name"); Thận trọng, bảo mật và hạn chế- Không sử dụng localStorage để lưu trữ dữ liệu nhạy cảm
- Dữ liệu được lưu trữ không có lớp bảo vệ quyền truy cập, nghĩa là tất cả dữ liệu được lưu trữ ở đó có thể được truy cập bằng bất kỳ mã nào trên trang của bạn
- Trong mọi trình duyệt, localStorage bị giới hạn chỉ lưu trữ 5Mb dữ liệu
- Việc sử dụng localStorage là đồng bộ, tôi. e. mỗi lần thực hiện chỉ được thực hiện lần lượt
- Bạn chỉ có thể sử dụng các chuỗi trong localStorage và điều này thật tệ vì nó giới hạn việc lưu trữ dữ liệu phức tạp hơn
- Không thể được sử dụng bởi nhân viên web. Điều này có nghĩa là nếu bạn muốn làm các ứng dụng phức tạp hơn, sử dụng xử lý nền để cải thiện hiệu suất, bạn không thể sử dụng localStorage vì nó không khả dụng
Vì vậy, lý tưởng nhất là bạn nên sử dụng localStorage cho các tình huống mà bạn muốn lưu trữ dữ liệu có thể công khai, không nhạy cảm, sẽ không được sử dụng trong các ứng dụng phức tạp hơn, không lớn hơn 5 MB và đó là chuỗi
Đối với những thứ giao diện người dùng đơn giản, nơi không có ý nghĩa gì khi lưu trữ thứ gì đó trong cơ sở dữ liệu hoặc một nơi nào đó lâu dài hơn, thật tuyệt khi sử dụng localStorage
Nếu bạn đang tạo một SPA hoặc bất kỳ trang web/hệ thống nào và muốn độc lập một chút với máy chủ, thì việc sử dụng localStorage là đủ và phá vỡ rất nhiều hơi nước
Phần kết luậnĐiều này là dành cho hôm nay. Tôi hy vọng bài viết này đã giúp bạn trong hành trình phát triển web của mình
Cảm ơn vì đã đọc. Theo dõi tôi trong nền tảng này để đọc thêm nội dung dành cho nhà phát triển
Chúc một ngày tốt lành, hẹn gặp lại. 👋
Đi tổng hợp. Xây dựng ứng dụng nhanh hơn như LegoBit là một công cụ mã nguồn mở để xây dựng ứng dụng theo cách hợp tác và mô-đun. Có thể kết hợp để vận chuyển nhanh hơn, nhất quán hơn và dễ dàng mở rộng quy mô
→ Tìm hiểu thêm
Xây dựng ứng dụng, trang, trải nghiệm người dùng và giao diện người dùng dưới dạng các thành phần độc lập. Sử dụng chúng để soạn ứng dụng mới và trải nghiệm nhanh hơn. Mang bất kỳ khung và công cụ nào vào quy trình làm việc của bạn. Chia sẻ, tái sử dụng và cộng tác để cùng nhau xây dựng