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 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ụ {Để 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
Có một phương pháp gọi là Để 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) 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
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");0Phụ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àoThự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ế
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 |
