JavaScript tìm kiếm phía máy khách

Lưu trữ phía máy khách?

Ở những nơi khác trong khu vực học tập MDN, chúng ta đã nói về sự khác biệt giữa trang web tĩnh và trang web động. Hầu hết các trang web hiện đại lớn đều là động — chúng lưu trữ dữ liệu trên máy chủ bằng cách sử dụng một số loại cơ sở dữ liệu [lưu trữ phía máy chủ], sau đó chạy mã phía máy chủ để truy xuất dữ liệu cần thiết, chèn dữ liệu đó vào các mẫu trang tĩnh và cung cấp HTML kết quả cho

Lưu trữ phía máy khách hoạt động trên các nguyên tắc tương tự, nhưng có những cách sử dụng khác nhau. Nó bao gồm các API JavaScript cho phép bạn lưu trữ dữ liệu trên máy khách [i. e. trên máy của người dùng] và sau đó truy xuất nó khi cần. Điều này có nhiều cách sử dụng riêng biệt, chẳng hạn như

• Cá nhân hóa tùy chọn trang web [e. g. hiển thị lựa chọn của người dùng về tiện ích con tùy chỉnh, cách phối màu hoặc kích thước phông chữ]
• Vẫn duy trì hoạt động trang web trước đó [e. g. lưu trữ nội dung của giỏ hàng từ phiên trước đó, ghi nhớ nếu người dùng đã đăng nhập trước đó]
• Lưu dữ liệu và nội dung cục bộ để tải xuống trang web nhanh hơn [và có thể ít tốn kém hơn] hoặc có thể sử dụng được mà không cần kết nối mạng
• Lưu cục bộ tài liệu do ứng dụng web tạo để sử dụng ngoại tuyến

Bộ lưu trữ phía máy khách và phía máy chủ thường được sử dụng cùng nhau. Ví dụ: bạn có thể tải xuống một loạt tệp nhạc [có thể được sử dụng bởi trò chơi trên web hoặc ứng dụng trình phát nhạc], lưu trữ chúng bên trong cơ sở dữ liệu phía máy khách và phát chúng khi cần. Người dùng sẽ chỉ phải tải xuống các tệp nhạc một lần — thay vào đó, trong các lần truy cập tiếp theo, chúng sẽ được truy xuất từ ​​cơ sở dữ liệu

Ghi chú. Có giới hạn về lượng dữ liệu bạn có thể lưu trữ bằng cách sử dụng API lưu trữ phía máy khách [có thể cả trên mỗi API riêng lẻ và tích lũy]; . Xem giới hạn bộ nhớ của trình duyệt và tiêu chí loại bỏ để biết thêm thông tin

Trường cũ. Bánh quy

Khái niệm lưu trữ phía máy khách đã có từ rất lâu. Kể từ những ngày đầu của web, các trang web đã sử dụng cookie để lưu trữ thông tin nhằm cá nhân hóa trải nghiệm người dùng trên các trang web. Chúng là hình thức lưu trữ phía máy khách sớm nhất thường được sử dụng trên web

Ngày nay, có sẵn các cơ chế dễ dàng hơn để lưu trữ dữ liệu phía máy khách, do đó chúng tôi sẽ không hướng dẫn bạn cách sử dụng cookie trong bài viết này. Tuy nhiên, điều này không có nghĩa là cookie hoàn toàn vô dụng trên web hiện đại — chúng vẫn được sử dụng phổ biến để lưu trữ dữ liệu liên quan đến cá nhân hóa và trạng thái của người dùng, chẳng hạn như. g. ID phiên và mã thông báo truy cập. Để biết thêm thông tin về cookie, hãy xem bài viết Sử dụng cookie HTTP của chúng tôi

Trường mới. Lưu trữ web và lập chỉ mục DB

Các tính năng "dễ dàng hơn" mà chúng tôi đã đề cập ở trên như sau

• API lưu trữ web cung cấp cơ chế lưu trữ và truy xuất các mục dữ liệu nhỏ hơn bao gồm tên và giá trị tương ứng. Điều này rất hữu ích khi bạn chỉ cần lưu trữ một số dữ liệu đơn giản, chẳng hạn như tên người dùng, họ có đăng nhập hay không, màu nền của màn hình sẽ sử dụng, v.v.
• API IndexedDB cung cấp cho trình duyệt một hệ thống cơ sở dữ liệu hoàn chỉnh để lưu trữ dữ liệu phức tạp. Điều này có thể được sử dụng cho mọi thứ từ bộ hồ sơ khách hàng hoàn chỉnh đến thậm chí các loại dữ liệu phức tạp như tệp âm thanh hoặc video

Bạn sẽ tìm hiểu thêm về các API này bên dưới

API bộ đệm

API

localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;

Việc sử dụng Cache và Service worker là một chủ đề nâng cao và chúng tôi sẽ không trình bày chi tiết về vấn đề này trong bài viết này, mặc dù chúng tôi sẽ trình bày một ví dụ trong phần Lưu trữ nội dung ngoại tuyến bên dưới

Lưu trữ dữ liệu đơn giản — lưu trữ web

API lưu trữ web rất dễ sử dụng — bạn lưu trữ các cặp dữ liệu tên/giá trị đơn giản [giới hạn ở chuỗi, số, v.v. ] và truy xuất các giá trị này khi cần

Cú pháp cơ bản

Hãy chỉ cho bạn cách

1. Trước tiên, hãy truy cập mẫu trống lưu trữ web của chúng tôi trên GitHub [mở mẫu này trong tab mới]
2. Mở bảng điều khiển JavaScript của các công cụ dành cho nhà phát triển của trình duyệt của bạn
3. 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.

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   9 và

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   0. Cái đầu tiên lưu giữ dữ liệu miễn là trình duyệt được mở [dữ liệu bị mất khi đóng trình duyệt] và cái thứ hai vẫn tồn tại dữ liệu ngay cả sau khi đóng trình duyệt và sau đó mở lại. Chúng tôi sẽ sử dụng cái thứ hai trong bài viết này vì nó thường hữu ích hơn. Phương thức

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   1 cho phép bạn lưu một mục dữ liệu trong bộ lưu trữ — nó có hai tham số. tên của mặt hàng và giá trị của nó. Hãy thử nhập cái này vào bảng điều khiển JavaScript của bạn [thay đổi giá trị thành tên riêng của bạn, nếu bạn muốn. ]

   localStorage.setItem["name", "Chris"];
   

4. Phương thức

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   2 nhận một tham số — tên của mục dữ liệu bạn muốn truy xuất — và trả về giá trị của mục đó. Bây giờ hãy nhập những dòng này vào bảng điều khiển JavaScript của bạn

   let myName = localStorage.getItem["name"];
   myName;
   

   Khi nhập vào dòng thứ hai, bạn sẽ thấy rằng biến

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   3 hiện chứa giá trị của mục dữ liệu

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   4
5. Phương thức

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   5 lấy một tham số — tên của mục dữ liệu bạn muốn xóa — và xóa mục đó khỏi bộ lưu trữ web. Nhập các dòng sau vào bảng điều khiển JavaScript của bạn

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   Dòng thứ ba bây giờ sẽ trả về

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   6 — mục

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   4 không còn tồn tại trong kho lưu trữ web

Dữ liệu vẫn tồn tại

Một tính năng chính của lưu trữ web là dữ liệu vẫn tồn tại giữa các lần tải trang [và ngay cả khi trình duyệt bị tắt, trong trường hợp của

localStorage.setItem["name", "Chris"];
let myName = localStorage.getItem["name"];
myName;

1. Mở lại mẫu trống lưu trữ web của chúng tôi, nhưng lần này trong một trình duyệt khác với trình duyệt mà bạn đã mở hướng dẫn này. Điều này sẽ làm cho nó dễ dàng hơn để đối phó với
2. Nhập những dòng này vào bảng điều khiển JavaScript của trình duyệt

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   Bạn sẽ thấy mục tên được trả lại
3. Bây giờ hãy đóng trình duyệt và mở lại
4. Nhập lại các dòng sau

   let myName = localStorage.getItem["name"];
   myName;
   

   Bạn sẽ thấy rằng giá trị vẫn có sẵn, mặc dù trình duyệt đã được đóng và sau đó mở lại

Lưu trữ riêng cho từng miền

Có kho lưu trữ dữ liệu riêng cho từng tên miền [tải từng địa chỉ web riêng trên trình duyệt]. Bạn sẽ thấy rằng nếu bạn tải hai trang web [giả sử google. com và amazon. com] và thử lưu trữ một mục trên một trang web, mục đó sẽ không có sẵn cho trang web kia

Điều này hợp lý — bạn có thể tưởng tượng các vấn đề bảo mật sẽ phát sinh nếu các trang web có thể nhìn thấy dữ liệu của nhau

Một ví dụ liên quan hơn

Hãy áp dụng kiến ​​thức mới tìm thấy này bằng cách viết một ví dụ hoạt động để cung cấp cho bạn ý tưởng về cách sử dụng lưu trữ web. Ví dụ của chúng tôi sẽ cho phép bạn nhập tên, sau đó trang sẽ cập nhật để cung cấp cho bạn lời chào được cá nhân hóa. Trạng thái này cũng sẽ tồn tại trong các lần tải lại trang/trình duyệt vì tên được lưu trữ trong bộ lưu trữ web

Bạn có thể tìm thấy HTML mẫu tại lời chào cá nhân. html — phần này chứa một trang web có tiêu đề, nội dung và chân trang và một biểu mẫu để nhập tên của bạn

Hãy xây dựng ví dụ để bạn có thể hiểu nó hoạt động như thế nào

1. Đầu tiên, tạo một bản sao cục bộ lời chào cá nhân của chúng tôi. html trong một thư mục mới trên máy tính của bạn
2. Tiếp theo, lưu ý cách HTML của chúng tôi tham chiếu tệp JavaScript có tên là

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   9, với một dòng như

   let myName = localStorage.getItem["name"];
   myName;
   

   0. Chúng ta cần tạo cái này và viết mã JavaScript của mình vào đó. Tạo tệp

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   9 trong cùng thư mục với tệp HTML của bạn
3. Chúng ta sẽ bắt đầu bằng cách tạo các tham chiếu đến tất cả các tính năng HTML mà chúng ta cần thao tác trong ví dụ này — chúng ta sẽ tạo tất cả chúng dưới dạng hằng số, vì các tham chiếu này không cần thay đổi trong vòng đời của ứng dụng. Thêm các dòng sau vào tệp JavaScript của bạn

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   9

4. Tiếp theo, chúng tôi cần bao gồm một trình xử lý sự kiện nhỏ để ngăn biểu mẫu thực sự tự gửi khi nhấn nút gửi, vì đây không phải là hành vi chúng tôi muốn. Thêm đoạn mã này bên dưới mã trước đó của bạn

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   0

5. Bây giờ chúng ta cần thêm một trình lắng nghe sự kiện, chức năng xử lý sẽ chạy khi nhấp vào nút "Say hello". Các nhận xét giải thích chi tiết chức năng của từng bit, nhưng về bản chất ở đây, chúng tôi đang lấy tên mà người dùng đã nhập vào hộp nhập văn bản và lưu nó vào bộ lưu trữ web bằng cách sử dụng

   let myName = localStorage.getItem["name"];
   myName;
   

   2, sau đó chạy một chức năng có tên là

   let myName = localStorage.getItem["name"];
   myName;
   

   3 sẽ xử lý việc cập nhật trang web thực tế . Thêm phần này vào cuối mã của bạn

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   3

6. Tại thời điểm này, chúng tôi cũng cần một trình xử lý sự kiện để chạy một chức năng khi nhấp vào nút "Quên" — điều này chỉ được hiển thị sau khi nhấp vào nút "Nói xin chào" [hai trạng thái biểu mẫu chuyển đổi qua lại]. Trong chức năng này, chúng tôi xóa mục

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   4 khỏi bộ lưu trữ web bằng cách sử dụng

   let myName = localStorage.getItem["name"];
   myName;
   

   5, sau đó chạy lại

   let myName = localStorage.getItem["name"];
   myName;
   

   3 để cập nhật màn hình. Thêm cái này vào dưới cùng

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   7

7. Bây giờ là lúc xác định chính hàm

   let myName = localStorage.getItem["name"];
   myName;
   

   3. Ở đây, chúng tôi kiểm tra xem mục tên đã được lưu trữ trong bộ lưu trữ web hay chưa bằng cách sử dụng

   let myName = localStorage.getItem["name"];
   myName;
   

   8 làm thử nghiệm có điều kiện. Nếu tên đã được lưu trữ, cuộc gọi này sẽ đánh giá là

   let myName = localStorage.getItem["name"];
   myName;
   

   9; . Nếu cuộc gọi ước tính là

   let myName = localStorage.getItem["name"];
   myName;
   

   9, chúng tôi sẽ hiển thị lời chào được cá nhân hóa, hiển thị phần "quên" của biểu mẫu và ẩn phần "Nói xin chào" của biểu mẫu. Nếu cuộc gọi ước tính là

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   90, chúng tôi sẽ hiển thị lời chào chung và thực hiện ngược lại. Một lần nữa, đặt đoạn mã sau ở dưới cùng

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   4

8. Cuối cùng nhưng không kém phần quan trọng, chúng ta cần chạy hàm

   let myName = localStorage.getItem["name"];
   myName;
   

   3 khi trang được tải. Nếu chúng tôi không làm điều này thì lời chào được cá nhân hóa sẽ không tồn tại trong các lần tải lại trang. Thêm phần sau vào cuối mã của bạn

   let myName = localStorage.getItem["name"];
   myName;
   

   0

Ví dụ của bạn đã hoàn thành - hoàn thành tốt. Tất cả những gì còn lại bây giờ là lưu mã của bạn và kiểm tra trang HTML của bạn trong trình duyệt. Bạn có thể thấy phiên bản đã hoàn thành của chúng tôi đang chạy trực tiếp tại đây

Ghi chú. Có một ví dụ khác phức tạp hơn một chút để khám phá tại Sử dụng API lưu trữ web

Ghi chú. Trong dòng

let myName = localStorage.getItem["name"];
myName;

localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;

localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;

Lưu trữ dữ liệu phức tạp — IndexedDB

API IndexedDB [đôi khi được viết tắt là IDB] là một hệ thống cơ sở dữ liệu hoàn chỉnh có sẵn trong trình duyệt mà bạn có thể lưu trữ dữ liệu phức tạp có liên quan, các loại không giới hạn ở các giá trị đơn giản như chuỗi hoặc số. Bạn có thể lưu trữ video, hình ảnh và hầu hết mọi thứ khác trong phiên bản IndexedDB

API IndexedDB cho phép bạn tạo cơ sở dữ liệu, sau đó tạo các kho lưu trữ đối tượng trong cơ sở dữ liệu đó. Kho đối tượng giống như các bảng trong cơ sở dữ liệu quan hệ và mỗi kho đối tượng có thể chứa một số đối tượng. Để tìm hiểu thêm về API IndexedDB, hãy xem Sử dụng IndexedDB

Tuy nhiên, điều này phải trả giá. IndexedDB sử dụng phức tạp hơn nhiều so với API lưu trữ web. Trong phần này, chúng tôi thực sự sẽ chỉ vạch ra bề nổi của khả năng của nó, nhưng chúng tôi sẽ cung cấp cho bạn đủ thông tin để bắt đầu

Làm việc thông qua một ví dụ lưu trữ ghi chú

Sau đây, chúng tôi sẽ hướng dẫn bạn qua một ví dụ cho phép bạn lưu trữ các ghi chú trong trình duyệt của mình, xem và xóa chúng bất cứ khi nào bạn muốn, giúp bạn xây dựng nó cho chính mình và giải thích các phần cơ bản nhất của IDB khi chúng tôi tiếp tục

Ứng dụng trông giống như thế này

Mỗi ghi chú có một tiêu đề và một số văn bản nội dung, mỗi ghi chú có thể chỉnh sửa riêng lẻ. Đoạn mã JavaScript mà chúng ta sẽ xem xét bên dưới có các nhận xét chi tiết để giúp bạn hiểu điều gì đang diễn ra

Bắt đầu

1. Trước hết, tạo các bản sao cục bộ của các tệp

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   97,

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   98 và

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   99 của chúng tôi vào một thư mục mới trên máy cục bộ của bạn
2. Hãy xem các tập tin. Bạn sẽ thấy rằng HTML xác định một trang web có đầu trang và chân trang, cũng như khu vực nội dung chính chứa nơi hiển thị ghi chú và biểu mẫu để nhập ghi chú mới vào cơ sở dữ liệu. CSS cung cấp một số kiểu dáng để làm rõ hơn những gì đang diễn ra. Tệp JavaScript chứa năm hằng số được khai báo có chứa các tham chiếu đến phần tử

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   00 mà các ghi chú sẽ được hiển thị trong đó, phần tử tiêu đề và nội dung

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   01, chính phần tử

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   02 và phần tử

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   03
3. Đổi tên tệp JavaScript của bạn thành

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   9. Bây giờ bạn đã sẵn sàng để bắt đầu thêm mã vào nó

Cơ sở dữ liệu thiết lập ban đầu

Bây giờ hãy xem chúng ta phải làm gì trước tiên, để thực sự thiết lập một cơ sở dữ liệu

1. Bên dưới các khai báo hằng số, thêm các dòng sau

   let myName = localStorage.getItem["name"];
   myName;
   

   1
   Ở đây chúng tôi đang khai báo một biến có tên là

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   05 - biến này sau này sẽ được sử dụng để lưu trữ một đối tượng đại diện cho cơ sở dữ liệu của chúng tôi. Chúng tôi sẽ sử dụng tính năng này ở một số nơi, vì vậy chúng tôi đã khai báo tính năng này trên toàn cầu tại đây để giúp mọi việc trở nên dễ dàng hơn
2. Tiếp theo, thêm vào như sau

   let myName = localStorage.getItem["name"];
   myName;
   

   2
   Dòng này tạo yêu cầu mở phiên bản

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   06 của cơ sở dữ liệu có tên là

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   07. Nếu điều này chưa tồn tại, nó sẽ được tạo cho bạn bằng mã tiếp theo. Bạn sẽ thấy mẫu yêu cầu này được sử dụng rất thường xuyên trong IndexedDB. Hoạt động cơ sở dữ liệu mất thời gian. Bạn không muốn treo trình duyệt trong khi chờ kết quả, vì vậy các thao tác cơ sở dữ liệu không đồng bộ, nghĩa là thay vì xảy ra ngay lập tức, chúng sẽ xảy ra vào một thời điểm nào đó trong tương lai và bạn sẽ nhận được thông báo khi chúng hoàn thành. Để xử lý việc này trong IndexedDB, bạn tạo một đối tượng yêu cầu [có thể gọi bất cứ thứ gì bạn thích — chúng tôi gọi nó là

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   08 ở đây, vì vậy rõ ràng nó dùng để làm gì]. Sau đó, bạn sử dụng trình xử lý sự kiện để chạy mã khi yêu cầu hoàn thành, không thành công, v.v. , mà bạn sẽ thấy được sử dụng bên dưới

   Ghi chú. Số phiên bản là quan trọng. Nếu bạn muốn nâng cấp cơ sở dữ liệu của mình [ví dụ: bằng cách thay đổi cấu trúc bảng], bạn phải chạy lại mã của mình với số phiên bản tăng lên, lược đồ khác được chỉ định bên trong trình xử lý

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   09 [xem bên dưới], v.v. Chúng tôi sẽ không đề cập đến việc nâng cấp cơ sở dữ liệu trong hướng dẫn này

3. Bây giờ hãy thêm các trình xử lý sự kiện sau ngay bên dưới phần bổ sung trước đó của bạn

   let myName = localStorage.getItem["name"];
   myName;
   

   3
   Trình xử lý sự kiện

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   30 sẽ chạy nếu hệ thống quay lại thông báo rằng yêu cầu không thành công. Điều này cho phép bạn trả lời vấn đề này. Trong ví dụ của chúng tôi, chúng tôi chỉ in một thông báo tới bảng điều khiển JavaScript. Trình xử lý sự kiện

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   31 sẽ chạy nếu yêu cầu trả về thành công, nghĩa là cơ sở dữ liệu đã được mở thành công. Nếu trường hợp này xảy ra, một đối tượng đại diện cho cơ sở dữ liệu đã mở sẽ có sẵn trong thuộc tính

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   32, cho phép chúng tôi thao tác với cơ sở dữ liệu. Chúng tôi lưu trữ điều này trong biến

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   05 mà chúng tôi đã tạo trước đó để sử dụng sau này. Chúng tôi cũng chạy một chức năng gọi là

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   34, hiển thị dữ liệu trong cơ sở dữ liệu bên trong

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   00. Chúng tôi chạy nó ngay bây giờ để các ghi chú đã có trong cơ sở dữ liệu được hiển thị ngay khi tải trang. Bạn sẽ thấy

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   34 được định nghĩa sau này
4. Cuối cùng, trong phần này, chúng ta sẽ thêm trình xử lý sự kiện quan trọng nhất để thiết lập cơ sở dữ liệu.

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   09. Trình xử lý này chạy nếu cơ sở dữ liệu chưa được thiết lập hoặc nếu cơ sở dữ liệu được mở với số phiên bản lớn hơn cơ sở dữ liệu được lưu trữ hiện có [khi thực hiện nâng cấp]. Thêm đoạn mã sau, bên dưới trình xử lý trước của bạn

   let myName = localStorage.getItem["name"];
   myName;
   

   4
   Đây là nơi chúng tôi xác định lược đồ [cấu trúc] của cơ sở dữ liệu của chúng tôi; . Ở đây, trước tiên chúng tôi lấy một tham chiếu đến cơ sở dữ liệu hiện có từ thuộc tính

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   38 của mục tiêu của sự kiện [

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   39], là đối tượng

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   70. Điều này tương đương với dòng

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   71 bên trong trình xử lý sự kiện

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   31, nhưng chúng ta cần thực hiện việc này một cách riêng biệt ở đây vì trình xử lý sự kiện

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   09 [nếu cần] sẽ chạy trước trình xử lý sự kiện

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   31, nghĩa là giá trị

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   05 sẽ không khả dụng nếu chúng ta . Sau đó, chúng tôi sử dụng

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   76 để tạo một kho lưu trữ đối tượng mới bên trong cơ sở dữ liệu đã mở của chúng tôi có tên là

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   77. Điều này tương đương với một bảng duy nhất trong một hệ thống cơ sở dữ liệu thông thường. Chúng tôi đã đặt tên cho nó là ghi chú và cũng đã chỉ định trường khóa

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   78 có tên là

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   79 — trong mỗi bản ghi mới, trường này sẽ tự động được cung cấp một giá trị gia tăng — nhà phát triển không cần đặt điều này một cách rõ ràng. Là khóa, trường

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   79 sẽ được sử dụng để xác định duy nhất các bản ghi, chẳng hạn như khi xóa hoặc hiển thị một bản ghi. Chúng tôi cũng tạo hai chỉ mục [trường] khác bằng phương pháp

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   41.

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   42 [sẽ chứa tiêu đề cho mỗi ghi chú] và

   localStorage.setItem["name", "Chris"];
   let myName = localStorage.getItem["name"];
   myName;
   

   43 [sẽ chứa nội dung của ghi chú]

Vì vậy, với lược đồ cơ sở dữ liệu này được thiết lập, khi chúng tôi bắt đầu thêm các bản ghi vào cơ sở dữ liệu, mỗi bản ghi sẽ được biểu diễn dưới dạng một đối tượng dọc theo các dòng này

let myName = localStorage.getItem["name"];
myName;

Thêm dữ liệu vào cơ sở dữ liệu

Bây giờ hãy xem cách chúng ta có thể thêm bản ghi vào cơ sở dữ liệu. Điều này sẽ được thực hiện bằng cách sử dụng mẫu trên trang của chúng tôi

Bên dưới trình xử lý sự kiện trước đó của bạn, hãy thêm dòng sau, dòng này sẽ thiết lập trình xử lý sự kiện

localStorage.setItem["name", "Chris"];
let myName = localStorage.getItem["name"];
myName;

localStorage.setItem["name", "Chris"];
let myName = localStorage.getItem["name"];
myName;

localStorage.setItem["name", "Chris"];
let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

Bây giờ hãy định nghĩa hàm

localStorage.setItem["name", "Chris"];
let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

Điều này khá phức tạp;

• Chạy

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  48 trên đối tượng sự kiện để dừng biểu mẫu thực sự gửi theo cách thông thường [điều này sẽ khiến trang bị làm mới và làm hỏng trải nghiệm]
• Tạo một đối tượng đại diện cho một bản ghi để nhập vào cơ sở dữ liệu, điền vào nó các giá trị từ các đầu vào của biểu mẫu. Lưu ý rằng chúng tôi không cần phải bao gồm giá trị

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  79 một cách rõ ràng — như chúng tôi đã giải thích trước đó, giá trị này được điền tự động
• Mở một giao dịch

  let myName = localStorage.getItem["name"];
  myName;
  

  00 đối với cửa hàng đối tượng

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  77 bằng phương pháp

  let myName = localStorage.getItem["name"];
  myName;
  

  02. Đối tượng giao dịch này cho phép chúng ta truy cập vào kho lưu trữ đối tượng để chúng ta có thể làm gì đó với nó, e. g. thêm một bản ghi mới
• Truy cập kho lưu trữ đối tượng bằng phương pháp

  let myName = localStorage.getItem["name"];
  myName;
  

  03, lưu kết quả vào biến

  let myName = localStorage.getItem["name"];
  myName;
  

  04
• Thêm bản ghi mới vào cơ sở dữ liệu bằng cách sử dụng

  let myName = localStorage.getItem["name"];
  myName;
  

  05. Điều này tạo ra một đối tượng yêu cầu, theo cách tương tự như chúng ta đã thấy trước đây
• Thêm một loạt các trình xử lý sự kiện vào các đối tượng

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  70 và

  let myName = localStorage.getItem["name"];
  myName;
  

  07 để chạy mã tại các điểm quan trọng trong vòng đời. Khi yêu cầu đã thành công, chúng tôi xóa các đầu vào biểu mẫu sẵn sàng để nhập ghi chú tiếp theo. Khi giao dịch hoàn tất, chúng ta chạy lại hàm

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  34 để cập nhật hiển thị ghi chú trên trang

Hiển thị dữ liệu

Chúng tôi đã tham chiếu

localStorage.setItem["name", "Chris"];
let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

Một lần nữa, hãy phá vỡ điều này

• Đầu tiên, chúng tôi xóa nội dung của phần tử

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  00, sau đó điền nội dung đã cập nhật vào nội dung đó. Nếu bạn không làm điều này, bạn sẽ nhận được một danh sách khổng lồ các nội dung trùng lặp được thêm vào sau mỗi lần cập nhật
• Tiếp theo, chúng tôi nhận được một tham chiếu đến cửa hàng đối tượng

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  77 bằng cách sử dụng

  let myName = localStorage.getItem["name"];
  myName;
  

  02 và

  let myName = localStorage.getItem["name"];
  myName;
  

  03 giống như chúng tôi đã làm trong

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  45, ngoại trừ ở đây chúng tôi đang xâu chuỗi chúng lại với nhau trong một dòng
• Bước tiếp theo là sử dụng phương thức

  let myName = localStorage.getItem["name"];
  myName;
  

  15 để mở một yêu cầu cho một con trỏ - đây là một cấu trúc có thể được sử dụng để lặp lại các bản ghi trong một kho lưu trữ đối tượng. Chúng tôi xâu chuỗi trình xử lý sự kiện

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  31 vào cuối dòng này để làm cho mã ngắn gọn hơn — khi con trỏ được trả về thành công, trình xử lý sẽ được chạy
• Chúng tôi nhận được một tham chiếu đến chính con trỏ [một đối tượng

  let myName = localStorage.getItem["name"];
  myName;
  

  17] bằng cách sử dụng

  let myName = localStorage.getItem["name"];
  myName;
  

  18
• Tiếp theo, chúng tôi kiểm tra xem liệu con trỏ có chứa bản ghi từ kho dữ liệu [

  let myName = localStorage.getItem["name"];
  myName;
  

  19] hay không — nếu có, chúng tôi tạo một đoạn DOM, điền vào đó dữ liệu từ bản ghi và chèn nó vào trang [bên trong phần tử

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  00]. Chúng tôi cũng bao gồm một nút xóa, khi được nhấp vào, sẽ xóa ghi chú đó bằng cách chạy hàm

  let myName = localStorage.getItem["name"];
  myName;
  

  21 mà chúng ta sẽ xem xét trong phần tiếp theo
• Khi kết thúc khối

  let myName = localStorage.getItem["name"];
  myName;
  

  22, chúng tôi sử dụng phương pháp

  let myName = localStorage.getItem["name"];
  myName;
  

  23 để chuyển con trỏ tới bản ghi tiếp theo trong kho dữ liệu và chạy lại nội dung của khối

  let myName = localStorage.getItem["name"];
  myName;
  

  22. Nếu có một bản ghi khác để lặp lại, điều này sẽ khiến nó được chèn vào trang và sau đó

  let myName = localStorage.getItem["name"];
  myName;
  

  25 được chạy lại, v.v.
• Khi không còn bản ghi nào để lặp lại,

  let myName = localStorage.getItem["name"];
  myName;
  

  26 sẽ trả về

  let myName = localStorage.getItem["name"];
  myName;
  

  27 và do đó, khối

  let myName = localStorage.getItem["name"];
  myName;
  

  28 sẽ chạy thay vì khối

  let myName = localStorage.getItem["name"];
  myName;
  

  22. Khối này kiểm tra xem có bất kỳ ghi chú nào được chèn vào

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  00 hay không — nếu không, nó sẽ chèn một thông báo cho biết không có ghi chú nào được lưu trữ

Xóa ghi chú

Như đã nêu ở trên, khi nhấn nút xóa của ghi chú, ghi chú đó sẽ bị xóa. Điều này đạt được nhờ hàm

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

• Phần đầu tiên của điều này có thể sử dụng một số giải thích - chúng tôi truy xuất ID của bản ghi sẽ bị xóa bằng cách sử dụng

  let myName = localStorage.getItem["name"];
  myName;
  

  32 - nhớ lại rằng ID của bản ghi đã được lưu trong thuộc tính

  let myName = localStorage.getItem["name"];
  myName;
  

  33 trên

  let myName = localStorage.getItem["name"];
  myName;
  

  34 khi nó được hiển thị lần đầu. Tuy nhiên, chúng tôi cần chuyển thuộc tính thông qua đối tượng

  let myName = localStorage.getItem["name"];
  myName;
  

  35 tích hợp toàn cầu vì nó thuộc chuỗi kiểu dữ liệu và do đó sẽ không được cơ sở dữ liệu nhận ra, cơ sở dữ liệu này mong đợi một số
• Sau đó, chúng tôi nhận được một tham chiếu đến kho lưu trữ đối tượng bằng cách sử dụng cùng một mẫu mà chúng tôi đã thấy trước đó và sử dụng phương thức

  let myName = localStorage.getItem["name"];
  myName;
  

  36 để xóa bản ghi khỏi cơ sở dữ liệu, chuyển cho nó ID
• Khi giao dịch cơ sở dữ liệu hoàn tất, chúng tôi xóa ghi chú

  let myName = localStorage.getItem["name"];
  myName;
  

  34 khỏi DOM và kiểm tra lại xem liệu

  localStorage.setItem["name", "Chris"];
  let myName = localStorage.getItem["name"];
  myName;
  

  00 hiện có trống hay không, chèn ghi chú khi thích hợp

À chính nó đấy. Ví dụ của bạn bây giờ sẽ hoạt động

Nếu bạn gặp sự cố với nó, vui lòng kiểm tra nó với ví dụ trực tiếp của chúng tôi [cũng xem mã nguồn]

Lưu trữ dữ liệu phức tạp qua IndexedDB

Như chúng tôi đã đề cập ở trên, IndexedDB có thể được sử dụng để lưu trữ nhiều thứ hơn là chỉ các chuỗi văn bản. Bạn có thể lưu trữ bất cứ thứ gì bạn muốn, bao gồm các đối tượng phức tạp như video hoặc hình ảnh đốm màu. Và nó không khó đạt được hơn nhiều so với bất kỳ loại dữ liệu nào khác

Để giải thích cách thực hiện, chúng tôi đã viết một ví dụ khác có tên là cửa hàng video IndexedDB [cũng có thể xem nó đang chạy trực tiếp tại đây]. Khi bạn chạy ví dụ lần đầu tiên, nó sẽ tải xuống tất cả các video từ mạng, lưu trữ chúng trong cơ sở dữ liệu IndexedDB, sau đó hiển thị các video trong giao diện người dùng bên trong các phần tử

let myName = localStorage.getItem["name"];
myName;

Hãy xem qua những phần thú vị nhất của ví dụ. Chúng tôi sẽ không xem xét tất cả - rất nhiều trong số đó tương tự như ví dụ trước và mã được nhận xét tốt

1. Đối với ví dụ này, chúng tôi đã lưu trữ tên của video để tìm nạp trong một mảng đối tượng

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   0

2. Để bắt đầu, khi cơ sở dữ liệu được mở thành công, chúng tôi chạy hàm

   let myName = localStorage.getItem["name"];
   myName;
   

   40. Điều này lặp qua các tên video khác nhau, cố gắng tải một bản ghi được xác định theo từng tên từ cơ sở dữ liệu

   let myName = localStorage.getItem["name"];
   myName;
   

   41. Nếu mỗi video được tìm thấy trong cơ sở dữ liệu [được kiểm tra bằng cách xem liệu

   let myName = localStorage.getItem["name"];
   myName;
   

   42 có đánh giá thành

   let myName = localStorage.getItem["name"];
   myName;
   

   9 hay không — nếu bản ghi không có, nó sẽ là

   let myName = localStorage.getItem["name"];
   myName;
   

   27], các tệp video của nó [được lưu trữ dưới dạng đốm màu] và tên video được chuyển thẳng đến hàm

   let myName = localStorage.getItem["name"];
   myName;
   

   45 . Nếu không, tên video được chuyển đến hàm

   let myName = localStorage.getItem["name"];
   myName;
   

   46 để, bạn đoán nó, tìm nạp video từ mạng

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   1

3. Đoạn mã sau được lấy từ bên trong

   let myName = localStorage.getItem["name"];
   myName;
   

   46 — ở đây chúng tôi tìm nạp các phiên bản MP4 và WebM của video bằng hai yêu cầu

   let myName = localStorage.getItem["name"];
   myName;
   

   48 riêng biệt. Sau đó, chúng tôi sử dụng phương thức

   let myName = localStorage.getItem["name"];
   myName;
   

   49 để trích xuất nội dung của từng phản hồi dưới dạng một đốm màu, cung cấp cho chúng tôi một đối tượng đại diện cho các video có thể được lưu trữ và hiển thị sau này. Tuy nhiên, chúng tôi gặp sự cố ở đây - cả hai yêu cầu này đều không đồng bộ, nhưng chúng tôi chỉ muốn cố gắng hiển thị hoặc lưu trữ video khi cả hai lời hứa đã được thực hiện. May mắn thay, có một phương pháp tích hợp để xử lý vấn đề như vậy —

   let myName = localStorage.getItem["name"];
   myName;
   

   50. Điều này nhận một đối số — tham chiếu đến tất cả các lời hứa riêng lẻ mà bạn muốn kiểm tra sự hoàn thành được đặt trong một mảng — và trả về một lời hứa được thực hiện khi tất cả các lời hứa riêng lẻ được thực hiện. Bên trong trình xử lý

   let myName = localStorage.getItem["name"];
   myName;
   

   51 cho lời hứa này, chúng tôi gọi hàm

   let myName = localStorage.getItem["name"];
   myName;
   

   45 giống như chúng tôi đã làm trước đây để hiển thị các video trong giao diện người dùng, sau đó chúng tôi cũng gọi hàm

   let myName = localStorage.getItem["name"];
   myName;
   

   53 để lưu trữ các video đó trong cơ sở dữ liệu

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   2

4. Trước tiên hãy nhìn vào

   let myName = localStorage.getItem["name"];
   myName;
   

   53. Điều này rất giống với mẫu mà bạn đã thấy trong ví dụ trước để thêm dữ liệu vào cơ sở dữ liệu — chúng tôi mở một giao dịch

   let myName = localStorage.getItem["name"];
   myName;
   

   00 và nhận tham chiếu đến kho đối tượng

   let myName = localStorage.getItem["name"];
   myName;
   

   56 của chúng tôi, tạo một đối tượng đại diện cho bản ghi để thêm vào cơ sở dữ liệu, sau đó thêm nó

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   3

5. Cuối cùng, chúng ta có

   let myName = localStorage.getItem["name"];
   myName;
   

   45, tạo ra các phần tử DOM cần thiết để chèn video vào giao diện người dùng và sau đó nối chúng vào trang. Phần thú vị nhất của điều này là những phần được hiển thị bên dưới — để thực sự hiển thị các đốm màu video của chúng ta trong phần tử

   let myName = localStorage.getItem["name"];
   myName;
   

   39, chúng ta cần tạo các URL đối tượng [URL bên trong trỏ đến các đốm màu video được lưu trữ trong bộ nhớ] bằng cách sử dụng phương thức

   let myName = localStorage.getItem["name"];
   myName;
   

   60. Khi đã xong, chúng tôi có thể đặt URL đối tượng thành giá trị của thuộc tính

   let myName = localStorage.getItem["name"];
   myName;
   

   62 của phần tử

   let myName = localStorage.getItem["name"];
   myName;
   

   61 và nó hoạt động tốt

   localStorage.removeItem["name"];
   myName = localStorage.getItem["name"];
   myName;
   

   4

Lưu trữ nội dung ngoại tuyến

Ví dụ trên đã chỉ ra cách tạo ứng dụng sẽ lưu trữ nội dung lớn trong cơ sở dữ liệu IndexedDB, tránh phải tải xuống nhiều lần. Đây đã là một cải tiến tuyệt vời đối với trải nghiệm người dùng, nhưng vẫn còn thiếu một thứ — các tệp HTML, CSS và JavaScript chính vẫn cần được tải xuống mỗi khi trang web được truy cập, nghĩa là nó sẽ không hoạt động khi có

Đây là nơi Service worker và Cache API có liên quan chặt chẽ xuất hiện

Service worker là một tệp JavaScript được đăng ký dựa trên một nguồn gốc cụ thể [trang web hoặc một phần của trang web tại một miền nhất định] khi được trình duyệt truy cập. Khi được đăng ký, nó có thể kiểm soát các trang có sẵn tại nguồn gốc đó. Nó thực hiện điều này bằng cách ngồi giữa một trang được tải và mạng và chặn các yêu cầu mạng nhắm vào nguồn gốc đó

Khi nó chặn một yêu cầu, nó có thể làm bất cứ điều gì bạn muốn với nó [xem các ý tưởng về trường hợp sử dụng], nhưng ví dụ điển hình là lưu các phản hồi của mạng ngoại tuyến và sau đó cung cấp các phản hồi đó để phản hồi yêu cầu thay vì các phản hồi từ mạng. Trên thực tế, nó cho phép bạn làm cho một trang web hoạt động hoàn toàn ngoại tuyến

API bộ đệm là một cơ chế lưu trữ phía máy khách khác, có một chút khác biệt — nó được thiết kế để lưu các phản hồi HTTP và do đó hoạt động rất tốt với nhân viên dịch vụ

Một ví dụ nhân viên dịch vụ

Hãy xem một ví dụ, để cho bạn một chút ý tưởng về điều này có thể trông như thế nào. Chúng tôi đã tạo một phiên bản khác của ví dụ về cửa hàng video mà chúng tôi đã thấy trong phần trước — phiên bản này hoạt động giống hệt nhau, ngoại trừ việc nó cũng lưu HTML, CSS và JavaScript trong API bộ đệm thông qua một nhân viên dịch vụ, cho phép ví dụ chạy ngoại tuyến

Xem cửa hàng video IndexedDB với nhân viên dịch vụ đang chạy trực tiếp và cũng xem mã nguồn

Đăng ký nhân viên dịch vụ

Điều đầu tiên cần lưu ý là có thêm một đoạn mã được đặt trong tệp JavaScript chính [xem chỉ mục. js]. Trước tiên, chúng tôi thực hiện kiểm tra phát hiện tính năng để xem liệu thành viên

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;

Ghi chú. Đường dẫn đã cho đến tệp

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

Cài đặt nhân viên dịch vụ

Lần tiếp theo bất kỳ trang nào dưới sự kiểm soát của nhân viên dịch vụ được truy cập [e. g. khi ví dụ được tải lại], nhân viên dịch vụ được cài đặt trên trang đó, nghĩa là nó sẽ bắt đầu kiểm soát nó. Khi điều này xảy ra, một sự kiện

let myName = localStorage.getItem["name"];
myName;

Hãy xem một ví dụ, trong sw. js [nhân viên dịch vụ]. Bạn sẽ thấy trình lắng nghe cài đặt đã được đăng ký với

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

Bên trong trình xử lý

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

Đây là nơi chúng ta thấy API bộ nhớ cache đang hoạt động. Chúng tôi sử dụng phương thức

let myName = localStorage.getItem["name"];
myName;

localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;

Vậy là xong, cài đặt xong

Đáp ứng các yêu cầu khác

Với nhân viên dịch vụ được đăng ký và cài đặt trên trang HTML của chúng tôi và tất cả các nội dung có liên quan đều được thêm vào bộ đệm của chúng tôi, chúng tôi gần như đã sẵn sàng để bắt đầu. Chỉ còn một việc nữa để làm. viết một số mã để đáp ứng các yêu cầu mạng khác

Đây là chức năng của đoạn mã thứ hai trong

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

Bên trong trình xử lý, trước tiên chúng tôi ghi lại URL của nội dung được yêu cầu. Sau đó, chúng tôi cung cấp phản hồi tùy chỉnh cho yêu cầu, sử dụng phương pháp

let myName = localStorage.getItem["name"];
myName;

Bên trong khối này, chúng tôi sử dụng

let myName = localStorage.getItem["name"];
myName;

let myName = localStorage.getItem["name"];
myName;

Nếu tìm thấy kết quả phù hợp, chúng tôi sẽ trả lại kết quả đó dưới dạng phản hồi tùy chỉnh. Nếu không, chúng tôi lấy [] phản hồi từ mạng và trả lại phản hồi đó

localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;

Và đó là nó cho nhân viên dịch vụ của chúng tôi. Bạn có thể làm rất nhiều việc với chúng — để biết thêm chi tiết, hãy xem sách dạy nấu ăn của nhân viên dịch vụ. Rất cám ơn Paul Kinlan về bài viết của anh ấy Thêm Service Worker và Offline vào Ứng dụng web của bạn, bài viết đã truyền cảm hứng cho ví dụ này

Kiểm tra ví dụ ngoại tuyến

Để kiểm tra ví dụ nhân viên dịch vụ của chúng tôi, bạn sẽ cần tải nó một vài lần để đảm bảo rằng nó đã được cài đặt. Một khi điều này được thực hiện, bạn có thể

• Hãy thử rút phích cắm mạng/tắt Wi-Fi của bạn
• Chọn Tệp > Làm việc Ngoại tuyến nếu bạn đang sử dụng Firefox
• Chuyển đến devtools, sau đó chọn Ứng dụng > Công nhân dịch vụ, sau đó chọn hộp kiểm Ngoại tuyến nếu bạn đang sử dụng Chrome

Nếu bạn làm mới lại trang ví dụ của mình, bạn vẫn sẽ thấy nó tải tốt. Mọi thứ được lưu trữ ngoại tuyến — nội dung trang trong bộ đệm và video trong cơ sở dữ liệu IndexedDB

JavaScript có thể được sử dụng cho máy khách không

Tại sao JavaScript lại tốt cho khách hàng

khách hàng là gì

khách hàng là gì