Hướng dẫn how do you cache data in javascript? - làm thế nào để bạn lưu trữ dữ liệu trong javascript?
Giới thiệu
Bởi vì không thể xác định trước cơ sở người dùng của bạn tại thời điểm phát triển, điều quan trọng là xây dựng các dịch vụ web có thể được truy cập bởi một loạt người dùng có thể không có phần cứng tốt nhất hoặc có thể có kết nối Internet chậm. Các ứng dụng web tiến bộ được tạo ra để đảm bảo rằng các dịch vụ web hoạt động trên tất cả các thiết bị. Trên các thiết bị di động, chúng được thiết kế để cung cấp trải nghiệm người dùng gần với các ứng dụng gốc. Dưới mui xe, PWA sử dụng nhân viên dịch vụ để đạt được hành vi lý tưởng và họ tận dụng API bộ đệm để kiểm soát thêm tài nguyên mạng. Trang cơ bản của Google Web này mô tả các nhân viên dịch vụ như thế này:
Chúng ta có thể thấy rằng bộ đệm có thể đóng một vai trò quan trọng trong quy trình làm việc của nhân viên dịch vụ. Bài viết này cho thấy API bộ đệm có thể được sử dụng như thế nào trong nhân viên dịch vụ và như một cơ chế lưu trữ tài nguyên chung. Tất cả các mã trong hướng dẫn này có thể được tìm thấy trong kho lưu trữ này, hãy thoải mái fork nó hoặc gửi PR. Phát hiện API CacheTrong các trình duyệt hiện đại, mỗi nguồn gốc có lưu trữ bộ đệm và chúng tôi có thể kiểm tra nó bằng cách mở các công cụ phát triển trình duyệt:
API bộ đệm có sẵn trong tất cả các trình duyệt hiện đại:
Bởi vì các trình duyệt cũ hơn có thể không hỗ trợ API, nên việc kiểm tra tính khả dụng của nó trước khi cố gắng tham khảo nó. Thuộc tính const newCache = await caches.open('new-cache');2 có sẵn trên đối tượng const newCache = await caches.open('new-cache');3 và chúng tôi có thể kiểm tra xem nó có được triển khai trong trình duyệt với đoạn trích này không: if ('caches' in window){ // you can safely insert your snippet here } Cách sử dụngAPI bộ đệm là một lựa chọn tuyệt vời để lưu trữ các tài nguyên có thể giải quyết URL, nghĩa là bạn nên sử dụng API bộ đệm khi bạn làm việc với các tài nguyên mạng cần thiết để tải ứng dụng của bạn. Nếu ứng dụng của bạn liên quan đến nhiều dữ liệu, bạn có thể lưu trữ dữ liệu mà người dùng rất có thể cần trên tải trang. Các tài nguyên này có thể bao gồm nội dung dựa trên tệp, tài sản, phản hồi API và các trang web. Để lưu trữ số lượng đáng kể dữ liệu có cấu trúc (bao gồm các tệp/blobs), bạn nên sử dụng API Lý tưởng nhất là API đã lập chỉ mục. API bộ đệm có một số phương thức để thực hiện các hoạt động (CRUD) sau:
Hãy cùng đi qua một số cách để sử dụng các phương thức này trong mã của chúng tôi. Tạo bộ nhớ cache mớiThêm (cập nhật) các mục vào bộ nhớ cacherequest-response pairs into our cache storage, we need to create a cache instance. Each origin can have multiple cache objects within its cache storage. We can create a new cache object using the const newCache = await caches.open('new-cache');4 method: const newCache = await caches.open('new-cache'); Lấy các mục từ bộ đệm Xóa các mục khỏi bộ đệm Hãy cùng đi qua một số cách để sử dụng các phương thức này trong mã của chúng tôi.Trước khi chúng tôi có thể bắt đầu lưu trữ các cặp phản hồi yêu cầu vào lưu trữ bộ nhớ cache của mình, chúng tôi cần tạo một thể hiện bộ đệm. Mỗi nguồn gốc có thể có nhiều đối tượng bộ đệm trong bộ nhớ bộ nhớ cache của nó. Chúng ta có thể tạo một đối tượng bộ đệm mới bằng phương thức const newCache = await caches.open('new-cache');4:
Đoạn trích ở trên nhận tên của bộ đệm dưới dạng tham số đơn và tiếp tục tạo bộ đệm với tên đó. Phương thức const newCache = await caches.open('new-cache');4 trước tiên kiểm tra xem bộ đệm có tên đó đã tồn tại. Nếu nó không có, nó tạo ra nó và trả về một const newCache = await caches.open('new-cache');6 giải quyết với đối tượng const newCache = await caches.open('new-cache');7. Cache.add()Sau khi thực thi đoạn trích, giờ đây chúng tôi sẽ có một đối tượng bộ đệm mới có thể được tham chiếu bằng tên mới. newCache.add('/cats.json') hoặc để có được quyền kiểm soát nhiều hơn, chúng ta có thể sử dụng đối tượng yêu cầu: const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))
Cache.addAll()Phương pháp này hoạt động tương tự như phương thức newCache.add('/cats.json')2 ngoại trừ việc nó có trong một loạt các đối tượng chuỗi URL yêu cầu hoặc các đối tượng newCache.add('/cats.json')3 và trả về một lời hứa khi tất cả các tài nguyên đã được lưu trữ: const urls = ['pets/cats.json', 'pets/dogs.json']; newCache.addAll(urls);
Cache.put()Phương pháp newCache.add('/cats.json')8 hoạt động khá khác với phần còn lại vì nó cho phép thêm một lớp điều khiển. Phương thức newCache.add('/cats.json')9 có hai tham số, phương pháp thứ nhất có thể là một chuỗi URL theo nghĩa đen hoặc đối tượng newCache.add('/cats.json')3, thứ hai là const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))1 từ mạng hoặc được tạo trong mã của bạn: // Retrieve cats.json and cache the response newCache.put('./cats.json') // Create a new entry for cats.json and store the generated response newCache.put('/cats.json', new Response('{"james": "kitten", "daniel": "kitten"}')) // Fetch a response from an external address and create a new entry for cats.json newCache.put('https://pets/cats.json'); Phương pháp newCache.add('/cats.json')0 cho phép một lớp điều khiển bổ sung vì nó cho phép bạn lưu trữ các phản hồi không phụ thuộc vào CORS hoặc các phản hồi khác phụ thuộc vào mã trạng thái phản hồi của máy chủ.
Lấy các mặt hàng từ bộ nhớ cacheSau khi chúng tôi thêm một số mục vào bộ đệm, chúng tôi cần có thể lấy chúng trong thời gian chạy. Chúng tôi có thể sử dụng phương thức const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))7 để truy xuất các phản hồi được lưu trong bộ nhớ cache của chúng tôi: // retrieve a new response const request = '/cats.json'; const response = await newCache.match(request); Trong mã trên, chúng tôi đã chuyển trong biến const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))8 cho phương thức const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))9, nếu biến const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))8 là chuỗi URL, nó được chuyển đổi thành đối tượng newCache.add('/cats.json')3 và được sử dụng làm đối số. Phương thức const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))9 sẽ trả về một const newCache = await caches.open('new-cache');6 giải quyết cho đối tượng const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))1 nếu tìm thấy mục nhập phù hợp. Trình duyệt sử dụng các yếu tố khác nhau trong việc xác định xem hai hoặc nhiều const urls = ['pets/cats.json', 'pets/dogs.json']; newCache.addAll(urls);5 có khớp hay không. A newCache.add('/cats.json')3 có thể có cùng URL với một URL khác nhưng sử dụng phương thức HTTP khác. Hai yêu cầu như vậy được coi là khác nhau bởi trình duyệt. Khi sử dụng phương thức const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))9, chúng ta cũng có thể truyền một đối tượng tùy chọn làm tham số thứ hai. Đối tượng này có các cặp giá trị chính cho const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))9 bỏ qua các yếu tố cụ thể khi khớp yêu cầu: // create an options object const options = { ignoreVary: true, // ignore differences in Headers ignoreMethod: true, // ignore differences in HTTP methods ignoreSearch: true // ignore differences in query strings } // then we pass it in here const response = await newCache.match(request, options); Trong trường hợp có nhiều hơn một mục bộ nhớ cache khớp, cái cũ nhất được trả lại. Nếu chúng ta có ý định truy xuất tất cả các phản hồi phù hợp, chúng ta có thể sử dụng phương thức const urls = ['pets/cats.json', 'pets/dogs.json']; newCache.addAll(urls);9. Loại bỏ các mục khỏi bộ đệmChúng tôi có thể không cần một mục nhập bộ nhớ cache nữa và muốn nó bị xóa. Chúng ta có thể xóa một mục nhập bộ đệm bằng phương thức // Retrieve cats.json and cache the response newCache.put('./cats.json') // Create a new entry for cats.json and store the generated response newCache.put('/cats.json', new Response('{"james": "kitten", "daniel": "kitten"}')) // Fetch a response from an external address and create a new entry for cats.json newCache.put('https://pets/cats.json');0: // delete a cache entry const request = '/cats.json'; newCache.delete(request); Trong mã trên, chúng tôi đã lưu chuỗi URL trong biến yêu cầu nhưng chúng tôi cũng có thể chuyển trong một đối tượng newCache.add('/cats.json')3 cho phương thức // Retrieve cats.json and cache the response newCache.put('./cats.json') // Create a new entry for cats.json and store the generated response newCache.put('/cats.json', new Response('{"james": "kitten", "daniel": "kitten"}')) // Fetch a response from an external address and create a new entry for cats.json newCache.put('https://pets/cats.json');2. Trong trường hợp chúng tôi có nhiều hơn một mục khớp, chúng tôi có thể chuyển trong một tùy chọn tương tự // Retrieve cats.json and cache the response newCache.put('./cats.json') // Create a new entry for cats.json and store the generated response newCache.put('/cats.json', new Response('{"james": "kitten", "daniel": "kitten"}')) // Fetch a response from an external address and create a new entry for cats.json newCache.put('https://pets/cats.json');3 như chúng tôi đã làm với phương thức const options = { method: "GET", headers: new Headers({ 'Content-Type': 'text/html' }), } newCache.add(new Request('/cats.json', options))9. Xóa bộ đệmCuối cùng, chúng ta có thể xóa bộ đệm bằng cách gọi phương thức // Retrieve cats.json and cache the response newCache.put('./cats.json') // Create a new entry for cats.json and store the generated response newCache.put('/cats.json', new Response('{"james": "kitten", "daniel": "kitten"}')) // Fetch a response from an external address and create a new entry for cats.json newCache.put('https://pets/cats.json');0 trên thuộc tính bộ đệm của đối tượng const newCache = await caches.open('new-cache');3. Hãy để xóa bộ đệm của chúng tôi trong đoạn trích bên dưới: // delete an existing cache caches.delete('new-cache');
Sự kết luậnTrong bài viết này, chúng tôi đã tham quan API Cache và thảo luận về tính hữu dụng của nó để phát triển các ứng dụng web tiến bộ. Chúng tôi cũng đã khám phá các phương thức CRUD của nó và thấy chúng tôi có thể truy xuất các phản hồi và lưu trữ dễ dàng như thế nào.
Tất cả các mã trong hướng dẫn này có thể được tìm thấy trong kho lưu trữ này, hãy thoải mái fork nó hoặc gửi PR. Logrocket: Debug Lỗi JavaScript dễ dàng hơn bằng cách hiểu bối cảnhMã gỡ lỗi luôn là một nhiệm vụ tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ dàng sửa chúng. Logrocket cho phép bạn hiểu các lỗi này theo những cách mới và độc đáo. Giải pháp giám sát frontend của chúng tôi theo dõi sự tham gia của người dùng với các mặt tiền JavaScript của bạn để cung cấp cho bạn khả năng tìm hiểu chính xác những gì người dùng đã làm dẫn đến lỗi. Logrocket Records nhật ký bảng điều khiển, thời gian tải trang, ngăn xếp, yêu cầu/phản hồi mạng chậm với các tiêu đề + thân, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu được tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn! Hãy thử nó miễn phí. Bộ nhớ đệm trong JavaScript là gì?Bộ nhớ đệm là một kỹ thuật phổ biến để làm cho các ứng dụng của bạn nhanh hơn. Nó cho phép bạn tránh các hoạt động chậm bằng cách sử dụng lại kết quả trước đó. Trong bài viết này, Ayo Isaiah đưa chúng tôi qua các tùy chọn khác nhau để lưu trữ trong các ứng dụng NodeJS. Bởi ayooluwa Ê -sai. #JavaScript.
JavaScript có bộ đệm không?Nói chung, hầu hết các trình duyệt hiện đại sẽ lưu trữ các tệp JavaScript. Đây là thực tiễn tiêu chuẩn cho các trình duyệt hiện đại và đảm bảo trải nghiệm tải tối ưu hóa. Các tài sản được lưu trong bộ nhớ cache như JavaScript thường sẽ được phục vụ từ bộ đệm của trình duyệt thay vì thực hiện một yêu cầu khác cho một tài nguyên đã được truy xuất.most modern browsers will cache JavaScript files. This is standard practice for modern browsers and ensures an optimized loading experience. Cached assets such as JavaScript will typically be served from the browser's cache instead of making another request for a resource that has already been retrieved.
Làm thế nào để JavaScript lưu trữ dữ liệu trong bộ đệm trình duyệt?Lưu trữ dữ liệu đơn giản - Lưu trữ web.. Đầu tiên, hãy chuyển đến mẫu trống lưu trữ web của chúng tôi trên GitHub (mở cái này trong một tab mới) .. Mở bảng điều khiển JavaScript của các công cụ phát triển của trình duyệt của bạn .. Tất cả dữ liệu lưu trữ web của bạn được chứa trong hai cấu trúc giống như đối tượng bên trong trình duyệt: sessionStorage và localStorage .. Làm thế nào để bạn thêm bộ đệm vào dữ liệu?Phương thức thêm () của giao diện bộ đệm có URL, lấy nó và thêm đối tượng phản hồi kết quả vào bộ đệm đã cho.Đối với các hoạt động phức tạp hơn, bạn sẽ cần sử dụng bộ đệm.đặt () trực tiếp.Lưu ý: Thêm () sẽ ghi đè lên bất kỳ cặp khóa/giá trị nào được lưu trữ trước đó trong bộ đệm phù hợp với yêu cầu.. For more complex operations, you'll need to use Cache. put() directly. Note: add() will overwrite any key/value pair previously stored in the cache that matches the request. |