Làm cách nào để bạn hiển thị dữ liệu được tìm nạp từ bộ lưu trữ cục bộ sang trang html đơn giản?
|
Đối với hầu hết các trình duyệt web, API lưu trữ web cung cấp cơ chế lưu trữ các cặp khóa-giá trị trong trình duyệt. Nó thường được chia thành localStorage và sessionStorage, và sự khác biệt chính giữa hai loại này là thời gian trình duyệt lưu trữ dữ liệu. Với sessionStorage, dữ liệu sẽ bị xóa sau khi phiên kết thúc hoặc đóng trình duyệt. Tuy nhiên, dữ liệu trong localStorage vẫn tồn tại cho đến khi bị xóa. Show
Một ví dụ thực tế phổ biến về localStorage là trò chơi Wordle. Khi bạn nhập một từ và nhấn Enter, các giá trị được lưu trữ trong localStorage. Nếu bạn đóng và mở lại trang Wordle trên cùng một thiết bị, bạn sẽ nhận được những từ giống như bạn đã thử. Bộ nhớ được đặt lại vào cuối ngày Câu trả lời hàng ngày cũng được lưu trữ trong localStorage để bạn có thể chơi trò chơi ngoại tuyến sau khi mở trang Tính năng localStorage có thể hữu ích trong một số trường hợp sử dụng. Bài viết này sẽ giải thích thêm về localStorage và cách nó hoạt động để bạn có thể sử dụng nó với các ứng dụng của mình. Tại sao bạn cần window.localStorage.getItem("Data"); // Hello from localStorage window.localStorage.getItem("data"); // null6Có một số tính năng hữu ích trong localStorage, bao gồm khả năng lưu trữ thông tin người dùng và cho phép bạn làm việc ngoại tuyến khi cần. Là một phần của API lưu trữ web trong trình duyệt web, localStorage hoạt động tương tự như cookie. Tuy nhiên, nó có thể lưu trữ một lượng dữ liệu lớn hơn. Bộ nhớ khả dụng trong Google Chrome là tối đa 5 MB cho mỗi miền, trong khi Bộ nhớ cục bộ của Opera chứa 3 MB nhưng có thể tăng lên Vì internet có thể không truy cập được một cách nhất quán ở mọi nơi, localStorage cho phép bạn thực hiện công việc của mình ngoại tuyến, giống như với Wordle Bạn cũng có thể lưu trữ trạng thái trang web của mình, mặc dù HTTP là không trạng thái. Giả sử bạn chỉ muốn sử dụng chủ đề Solarized Dark trên Alligator. trang web io. Sử dụng localStorage, bạn sẽ không phải thay đổi chủ đề mỗi khi mở lại trình duyệt và truy cập trang web. Lợi ích của window.localStorage.getItem("Data"); // Hello from localStorage window.localStorage.getItem("data"); // null7Sử dụng localStorage mang lại một số lợi ích, bao gồm những lợi ích sau. - Thêm dung lượng lưu trữ. Như đã lưu ý trước đó, localStorage có thể lưu trữ tới 5 MB dữ liệu trong hầu hết các trình duyệt, nhiều hơn những gì cookie có thể lưu trữ. - API thân thiện với nhà phát triển. API giúp dễ dàng truy cập và thêm dữ liệu trong localStorage. Trên bất kỳ trình duyệt nào, có thể truy cập các hàm localStorage từ đối tượng - Kiên trì. Một trong những lý do phổ biến nhất để sử dụng localStorage là để giữ cho dữ liệu liên tục. Mặc dù sessionStorage cũng có thể lưu trữ dữ liệu theo cặp khóa-giá trị, dữ liệu này sẽ bị xóa khi phiên kết thúc. Tuy nhiên, với localStorage, dữ liệu liên tục cho đến khi nó bị xóa một cách rõ ràng. Chống mẫu LocalStorageChống mẫu. Lưu mã thông báo truy cậpViệc sử dụng rộng rãi localStorage là lưu trữ mã thông báo truy cập, chẳng hạn như mã thông báo JWT, ở phía người dùng để người dùng duy trì trạng thái đăng nhập trong một khoảng thời gian nhất định. Điều này không an toàn và không bao giờ được thực hiện vì nó có thể truy cập được bằng JavaScript trên cùng một miền. Điều này có nghĩa là bất kỳ mã JavaScript nào đang chạy trên trang đều có thể truy cập vào bộ lưu trữ, khiến ứng dụng của bạn dễ bị tấn công bằng kịch bản chéo trang (XSS) Các ứng dụng cũng thường sử dụng tập lệnh của bên thứ ba để nhận phân tích hoặc quảng cáo và nếu ngay cả một tập lệnh duy nhất bị xâm phạm, bạn có nguy cơ bị tấn công. Để biết thêm thông tin, hãy xem bài viết này về các cách lưu trữ mã thông báo xác thực an toàn hơn. Các trường hợp sử dụng LocalStorageSau đây là một số trường hợp sử dụng phổ biến cho localStorage Lưu dữ liệu biểu mẫu đã gửi một phầnNếu người dùng đang điền vào một biểu mẫu dài, localStorage có thể hữu ích trong việc lưu trữ một phần dữ liệu. Ngay cả khi internet bị ngắt kết nối giữa lúc bắt đầu biểu mẫu và gửi biểu mẫu, người dùng sẽ không mất dữ liệu nhập và có thể tiếp tục từ nơi họ đã dừng lại. Bộ nhớ đệmTheo phân tích năm 2022 của Portent, tỷ lệ chuyển đổi khách hàng có thể tăng 2. 5 lần khi trang của bạn tải trong một so với. năm giây. Xây dựng một trang web chậm không còn là một lựa chọn nữa. Nhưng khi người dùng cuối yêu cầu dữ liệu cụ thể và yêu cầu phải truyền qua dây với độ trễ liên quan, bộ nhớ đệm có thể là cứu cánh. LocalStorage có thể được sử dụng để lưu trữ trang web hoặc lưu trữ dữ liệu tĩnh để hiển thị thông tin khách hàng ngay cả khi trang ngoại tuyến, sau đó tìm nạp dữ liệu cần thiết khi kết nối lại internet Đồng bộ hóa dữ liệu giữa các tabSử dụng localStorage, người dùng có thể mở trang web hẹn giờ trên tab trình duyệt, bắt đầu hẹn giờ, sau đó mở một tab khác của cùng một trang web và đồng bộ hóa hẹn giờ giữa cả hai tab. Bạn cũng có thể đồng bộ hóa nhạc hoặc trình phát video của mình giữa các tab Dữ liệu trước khi điềnBạn có thể sử dụng localStorage để lưu trữ phiên bản ứng dụng được điền sẵn. Khi người dùng truy cập ứng dụng của bạn, họ sẽ thấy ngay một thứ gì đó trên màn hình, sau đó ứng dụng của bạn có thể thực hiện lệnh gọi đến phần phụ trợ để tìm nạp thông tin mới. Các trang web thương mại điện tử thường sử dụng localStorage để lưu trữ các mục mà người dùng đã xem và dữ liệu cụ thể khác của người dùng Thực hiện các thao tác trên window.localStorage.getItem("Data"); // Hello from localStorage window.localStorage.getItem("data"); // null6Bạn có một số phương pháp để lựa chọn khi thực hiện các thao tác trên localStorage. họ đang - - - - - Sau đây là chi tiết hơn về mỗi người. Lưu trữ giá trị với window.localStorage.getItem("Data"); // Hello from localStorage window.localStorage.getItem("data"); // null2Phương thức Dưới đây là một ví dụ đơn giản về việc sử dụng phương pháp Nếu bạn chạy mã này trên bảng điều khiển trình duyệt, thì mã này sẽ lưu một khóa có tên Sau khi chạy mã, nếu bạn mở tab Ứng dụng và nhấp vào localStorage, bạn sẽ có thể thấy khóa Lưu ý rằng bạn chỉ có thể lưu trữ chuỗi trong localStorage. (Trên Firefox và Chrome, dữ liệu localStorage được lưu trữ bên trong cơ sở dữ liệu Sqlite. ) Nếu bạn muốn giữ mảng hoặc đối tượng, cách đơn giản là chuyển đổi dữ liệu sang JSON bằng phương thức Truy cập các mục bằng window.localStorage.getItem("Data"); // Hello from localStorage window.localStorage.getItem("data"); // null3API localStorage sử dụng phương pháp Cú pháp của mã được hiển thị dưới đây Xóa mục cụ thể bằng window.localStorage.getItem("Data"); // Hello from localStorage window.localStorage.getItem("data"); // null4Như tên gợi ý, phương thức Bạn có thể kiểm tra tab Ứng dụng của công cụ phát triển trình duyệt để xác nhận rằng khóa đã bị xóa Xóa tất cả các mục bằng window.localStorage.getItem("Data"); // Hello from localStorage window.localStorage.getItem("data"); // null5Nếu bạn muốn xóa localStorage của một miền cụ thể, hãy sử dụng phương pháp Truy xuất tên khóa bằng window.localStorage.getItem("Data"); // Hello from localStorage window.localStorage.getItem("data"); // null6Phương thức Đây là một ví dụ Giá trị được trả về có thể khác nếu localStorage của bạn cho miền đã giữ một số giá trị Lắng nghe sự kiện lưu trữĐể lắng nghe các sự kiện liên quan đến localStorage với DOM, hãy sử dụng sự kiện Dưới đây là một ví dụ đơn giản về việc nghe các sự kiện Bất cứ khi nào có thay đổi đối với localStorage, mã này sẽ đặt HTML bên trong cho div có ID từ Đây là HTML cho đoạn mã trên Bạn cũng có thể xem liên kết CodePen để biết ví dụ trên Lưu trữ cục bộ so với. PhiênStorageLocalStorage và sessionStorage có một số điểm tương đồng. Ví dụ - Cả hai loại lưu trữ đều được cung cấp bởi API lưu trữ web - Cả hai chỉ có thể lưu trữ các giá trị kiểu chuỗi - Giới hạn dữ liệu là khoảng 5 MB trong hầu hết các trường hợp - Cả hai loại lưu trữ chỉ có thể lưu trữ giá trị theo cặp khóa-giá trị Tuy nhiên, có một số khác biệt giữa hai. Một là kiên trì. dữ liệu được lưu trữ trong localStorage vẫn tồn tại qua các phiên. Mở tab mới, truy cập miền mới hoặc đóng trình duyệt sẽ không xóa localStorage. Mặt khác, sessionStorage bị xóa bất cứ khi nào phiên kết thúc. Mở một tab mới hoặc truy cập một miền mới sẽ xóa phiên cho một miền cụ thể Một điểm khác biệt nữa là, trong trường hợp của một số trình duyệt, localStorage không hoạt động ở chế độ ẩn danh nhưng sessionStorage thì có. Trong những trường hợp này, bạn nên viết trình bao bọc cho mã localStorage của mình để sử dụng sessionStorage Lưu trữ cục bộ so với. được lập chỉ mụcDBIndexedDB là một API để lưu trữ một lượng lớn dữ liệu có cấu trúc, bao gồm cả các tệp, ở phía máy khách. Dữ liệu được lưu trữ bằng IndexedDB cũng liên tục và được lưu trữ cho đến khi nó bị xóa rõ ràng. IndexedDB cũng cung cấp một cơ chế tích hợp để lập phiên bản lược đồ IndexedDB cung cấp một số lợi ích so với localStorage. Chẳng hạn, IndexedDB không chặn DOM khi được sử dụng với một worker, không giống như localStorage. Tuy nhiên, localStorage nhanh hơn một chút so với IndexedDB. API của localStorage cũng dễ bắt đầu hơn nhiều, khiến nó trở thành lựa chọn phổ biến hơn. Lý do chính để giới thiệu IndexedDB là để tạo ra phiên bản localStorage tốt hơn. Vì vậy, tại sao không sử dụng IndexedDB trong mọi trường hợp? . Nhưng nếu bạn đang lưu trữ một lượng nhỏ dữ liệu cặp khóa-giá trị đơn giản, hãy sử dụng localStorage. Phần kết luậnTính năng localStorage có thể mang lại lợi ích cho ứng dụng của bạn, bao gồm bộ nhớ mở để duy trì dữ liệu miễn là bạn cần và khả năng làm cho ứng dụng của bạn hoạt động ngoại tuyến. Hình thức lưu trữ dữ liệu này sẽ không phải là lựa chọn tốt nhất trong mọi trường hợp sử dụng và bạn có thể cần xem xét thay thế bằng IndexedDB trong một số trường hợp. Tỉ mỉTỉ mỉ là một công cụ dành cho các kỹ sư phần mềm để nắm bắt các hồi quy trực quan trong các ứng dụng web mà không cần viết hoặc duy trì các bài kiểm tra giao diện người dùng Đưa đoạn mã tỉ mỉ vào môi trường sản xuất hoặc dàn dựng và nhà phát triển. Đoạn mã này ghi lại các phiên của người dùng bằng cách thu thập dữ liệu mạng và luồng nhấp chuột. Khi bạn đăng một yêu cầu kéo, Tỉ mỉ sẽ chọn một tập hợp con các phiên được ghi lại có liên quan và mô phỏng các phiên này dựa trên giao diện người dùng của ứng dụng của bạn. Tỉ mỉ chụp ảnh màn hình tại các điểm quan trọng và phát hiện bất kỳ sự khác biệt trực quan nào. Nó đăng những điểm khác biệt đó trong một bình luận để bạn kiểm tra sau vài giây. Tỉ mỉ tự động cập nhật các hình ảnh cơ sở sau khi bạn hợp nhất PR của mình. Điều này giúp loại bỏ gánh nặng thiết lập và bảo trì của thử nghiệm giao diện người dùng Tỉ mỉ cô lập mã giao diện người dùng bằng cách loại bỏ tất cả các cuộc gọi mạng, sử dụng các phản hồi mạng được ghi lại trước đó. Điều này có nghĩa là Tỉ mỉ không bao giờ gây ra tác dụng phụ và bạn không cần môi trường dàn dựng Làm cách nào để hiển thị dữ liệu lưu trữ cục bộ trong HTML?Cú pháp . Lưu dữ liệu vào bộ nhớ cục bộ. lưu trữ cục bộ. setItem(key, value); Đọc dữ liệu từ bộ nhớ cục bộ. để họ = localStorage. getItem(key); Xóa dữ liệu khỏi bộ nhớ cục bộ. lưu trữ cục bộ. removeItem(key); Xóa tất cả (Xóa bộ nhớ cục bộ) localStorage. xa lạ(); Chúng tôi có thể sử dụng localStorage trong HTML không?Lưu trữ web HTML cung cấp hai đối tượng để lưu trữ dữ liệu trên máy khách. cửa sổ. localStorage - lưu trữ dữ liệu không có ngày hết hạn . cửa sổ. sessionStorage - lưu trữ dữ liệu cho một phiên (dữ liệu bị mất khi đóng tab trình duyệt)
Làm cách nào để truy xuất dữ liệu từ localStorage bằng JavaScript?Khóa học JavaScript toàn ngăn xếp hoàn chỉnh. Để truy xuất các phần tử từ bộ nhớ cục bộ trong Java Script, chúng tôi sử dụng phương thức getItem() giúp chúng tôi truy cập các phần tử được lưu trữ trong đối tượng bộ nhớ cục bộ. Phương thức getItem() thuộc về đối tượng lưu trữ. Nó có thể là đối tượng lưu trữ cục bộ hoặc đối tượng lưu trữ phiên.
Làm cách nào tôi có thể lấy dữ liệu cụ thể từ localStorage?Để lấy các mục từ localStorage, hãy sử dụng phương thức getItem() . getItem() cho phép bạn truy cập dữ liệu được lưu trữ trong đối tượng localStorage của trình duyệt. |
