JavaScript tìm kiếm phía máy khách
Các trình duyệt web hiện đại hỗ trợ một số cách để trang web lưu trữ dữ liệu trên máy tính của người dùng — với sự cho phép của người dùng — sau đó truy xuất dữ liệu đó khi cần thiết. Điều này cho phép bạn duy trì dữ liệu để lưu trữ lâu dài, lưu các trang web hoặc tài liệu để sử dụng ngoại tuyến, giữ lại các cài đặt dành riêng cho người dùng cho trang web của bạn, v.v. Bài viết này giải thích những điều cơ bản về cách thức hoạt động của chúng Show
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ư
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 quyKhá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 DBCác tính năng "dễ dàng hơn" mà chúng tôi đã đề cập ở trên như sau
Bạn sẽ tìm hiểu thêm về các API này bên dưới API bộ đệmAPI 8 được thiết kế để lưu trữ phản hồi HTTP cho các yêu cầu cụ thể và rất hữu ích để thực hiện những việc như lưu trữ nội dung trang web ngoại tuyến để trang web sau đó có thể được sử dụng mà không cần kết nối mạng. Bộ đệm thường được sử dụng kết hợp với Service Worker API, mặc dù không nhất thiết phải như vậy.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ữ webAPI 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ảnHãy chỉ cho bạn cách
Dữ liệu vẫn tồn tạiMộ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 0). Hãy nhìn vào điều này trong hành động
Lưu trữ riêng cho từng miềnCó 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ơnHã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
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 0 của nguồn cho phiên bản đã hoàn thành của chúng tôi, thuộc tính 95 xác định rằng nội dung của phần tử 96 sẽ không thực thi cho đến khi trang tải xongLưu trữ dữ liệu phức tạp — IndexedDBAPI 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
Cơ sở dữ liệu thiết lập ban đầuBâ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
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 5Thêm dữ liệu vào cơ sở dữ liệuBâ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 44 chạy một hàm có tên là 45 khi biểu mẫu được gửi (khi nhấn nút gửi 03 để gửi biểu mẫu thành công) 6Bây giờ hãy định nghĩa hàm 45. Thêm phần này bên dưới dòng trước của bạn 7Điều này khá phức tạp;
Hiển thị dữ liệuChúng tôi đã tham chiếu 34 hai lần trong mã của mình, vì vậy chúng tôi có thể định nghĩa nó tốt hơn. Thêm phần này vào mã của bạn, bên dưới định nghĩa hàm trước đó 8Một lần nữa, hãy phá vỡ điều này
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 21, trông giống như vậy 9
À 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 IndexedDBNhư 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ử 39. Lần thứ hai bạn chạy nó, nó sẽ tìm các video trong cơ sở dữ liệu và lấy chúng từ đó thay vì hiển thị chúng — điều này làm cho các lần tải tiếp theo nhanh hơn và ít ngốn băng thông hơnHã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
Lưu trữ nội dung ngoại tuyếnVí 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 63 có sẵn trong đối tượng 64 hay không. Nếu điều này trả về đúng, thì chúng tôi biết rằng ít nhất những điều cơ bản của nhân viên dịch vụ được hỗ trợ. Ở đây, chúng tôi sử dụng phương thức 65 để đăng ký một nhân viên dịch vụ có trong tệp 66 với nguồn gốc mà nó cư trú, để nó có thể kiểm soát các trang trong cùng thư mục với nó hoặc các thư mục con. Khi lời hứa của nó được thực hiện, nhân viên dịch vụ được coi là đã đăng ký 5Ghi chú. Đường dẫn đã cho đến tệp 66 có liên quan đến nguồn gốc của trang web, không phải tệp JavaScript chứa mã. Nhân viên phục vụ ở 68. Gốc là 69, và do đó đường dẫn đã cho phải là 70. Nếu bạn muốn lưu trữ ví dụ này trên máy chủ của riêng mình, bạn phải thay đổi điều này cho phù hợp. Điều này khá khó hiểu, nhưng nó phải hoạt động theo cách này vì lý do bảo mậtCà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 71 được kích hoạt đối với nhân viên phục vụ; 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 72. Từ khóa 72 này là một cách để chỉ phạm vi toàn cầu của nhân viên dịch vụ từ bên trong tệp nhân viên dịch vụBên trong trình xử lý 71, chúng tôi sử dụng phương thức 75, có sẵn trên đối tượng sự kiện, để báo hiệu rằng trình duyệt không nên hoàn tất cài đặt nhân viên dịch vụ cho đến khi lời hứa bên trong nó được thực hiện thành côngĐâ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 76 để mở một đối tượng bộ đệm mới trong đó các phản hồi có thể được lưu trữ (tương tự như kho lưu trữ đối tượng IndexedDB). Lời hứa này hoàn thành với một đối tượng 8 đại diện cho bộ đệm 78. Sau đó, chúng tôi sử dụng phương pháp 79 để tìm nạp một loạt nội dung và thêm phản hồi của chúng vào bộ đệm 6Vậy là xong, cài đặt xong Đáp ứng các yêu cầu khácVớ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 66. Chúng tôi thêm một người nghe khác vào phạm vi toàn cầu của nhân viên dịch vụ, chạy chức năng xử lý khi sự kiện 81 được đưa ra. Điều này xảy ra bất cứ khi nào trình duyệt đưa ra yêu cầu về một nội dung trong thư mục mà nhân viên dịch vụ đã đăng ký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 82Bên trong khối này, chúng tôi sử dụng 83 để kiểm tra xem một yêu cầu phù hợp (i. e. khớp với URL) có thể được tìm thấy trong bất kỳ bộ đệm nào. Lời hứa này hoàn thành với phản hồi phù hợp nếu tìm thấy kết quả phù hợp hoặc 27 nếu khôngNế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 đó 7Và đó 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ể
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ôngJavaScript là tập lệnh phía máy khách , nghĩa là trình duyệt xử lý mã thay vì máy chủ web. Các tập lệnh phía máy khách thường được sử dụng khi chúng tôi muốn xác thực dữ liệu trước khi gửi nó đến máy chủ web, điều chỉnh giao diện theo phản hồi của người dùng và để triển khai các tính năng nâng cao khác.
Tại sao JavaScript lại tốt cho khách hàngJavaScript có thể là ngôn ngữ kịch bản phía máy khách, suy ra rằng trình duyệt của máy khách xử lý tệp văn bản ASCII chứ không phải máy chủ trực tuyến . Với sự trợ giúp của JavaScript, điều này có thể tải trang web mà không cần liên hệ với máy chủ chính.
khách hàng là gìKhung phía máy khách là thường là thư viện JavaScript và chạy trong trình duyệt Web, chẳng hạn như React, Angular và Vue . Một số nhà phát triển web chọn xây dựng các ứng dụng web của họ trên các thư viện khung phía máy khách.
khách hàng là gìPhía Máy khách là mọi thứ trong ứng dụng web được hiển thị hoặc xuất hiện trên thiết bị của khách hàng (người dùng cuối), bao gồm những gì họ nhìn thấy – hình ảnh, văn bản và phần còn lại của giao diện người dùng. Nó cũng liên quan đến bất kỳ hành động nào được thực hiện bởi ứng dụng trong trình duyệt của người dùng |