Hướng dẫn where should i store javascript files? - Tôi nên lưu trữ các tệp javascript ở đâu?

Lưu trữ phía khách hàng?

Ở những nơi khác trong khu vực học tập MDN, chúng tôi đã nói về sự khác biệt giữa các trang web tĩnh và các trang web động. Hầu hết các trang web hiện đại chính 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 nó vào các mẫu trang tĩnh và phục vụ HTML kết quả để kết quả thành HTML để lấy máy khách được hiển thị bởi trình duyệt của người dùng.

Lưu trữ phía máy khách hoạt động theo các nguyên tắc tương tự, nhưng có 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 (nghĩa là 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 khác biệt, chẳng hạn như:

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

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

Lưu ý: Có giới hạn về lượng dữ liệu bạn có thể lưu trữ bằ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); Giới hạn chính xác khác nhau tùy thuộc vào trình duyệt và có thể dựa trên cài đặt người dùng. Xem giới hạn lưu trữ trình duyệt và tiêu chí trục xuất để biết thêm thông tin. There are limits to the amount of data you can store using client-side storage APIs (possibly both per individual API and cumulatively); the exact limit varies depending on the browser and possibly based on user settings. See Browser storage limits and eviction criteria for more information.

Trường học cũ: Cookies

Khái niệm lưu trữ phía khách hàng đã tồn tại trong một thời gian dài. Kể từ những ngày đầu của web, các trang web đã sử dụng cookie để lưu trữ thông tin để 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ó những cơ chế dễ dàng hơn để lưu trữ dữ liệu phía khách hàng, do đó chúng tôi sẽ không dạy 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, ví dụ: 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 của chúng tôi bằng cách sử dụng bài viết của HTTP Cookies.

Trường học mới: Lưu trữ web và IndexedDB

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 một cơ chế để lưu trữ và truy xuất các mục dữ liệu nhỏ hơn bao gồm một 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, như tên của người dùng, cho dù chúng được đăng nhập, màu gì để sử dụng cho nền của màn hình, v.v.
• API lập chỉ mục 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 những thứ từ các bộ hồ sơ khách hàng hoàn chỉnh đến các loại dữ liệu phức tạp như các tệp âm thanh hoặc video.

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

API bộ đệm

API

let myName = localStorage.getItem("name");
myName;

Việc sử dụng bộ đệm và nhân viên dịch vụ là một chủ đề nâng cao và chúng tôi sẽ không bao gồm nó rất chi tiết trong bài viết này, mặc dù chúng tôi sẽ hiển thị một ví dụ trong phần lưu trữ tài sản 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 thiết.

Cú pháp cơ bản

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

1. Đầ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).
2. 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.
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:

   let myName = localStorage.getItem("name");
   myName;
   

   2 và

   let myName = localStorage.getItem("name");
   myName;
   

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

   let myName = localStorage.getItem("name");
   myName;
   

   4 cho phép bạn lưu một mục dữ liệu trong lưu trữ - nó lấy hai tham số: tên của mục và giá trị của nó. Hãy thử gõ 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 của chính bạn, nếu bạn muốn!):

   localStorage.setItem("name", "Chris");
   

4. Phương thức

   let myName = localStorage.getItem("name");
   myName;
   

   5 lấy một tham số - tên của một 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 các 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 dòng thứ hai, bạn sẽ thấy biến

   let myName = localStorage.getItem("name");
   myName;
   

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

   let myName = localStorage.getItem("name");
   myName;
   

   7.
5. Phương thức

   let myName = localStorage.getItem("name");
   myName;
   

   8 lấy một tham số - tên của một mục dữ liệu bạn muốn xóa - và loại bỏ mục đó ra khỏi 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ề

   let myName = localStorage.getItem("name");
   myName;
   

   9 - mục

   let myName = localStorage.getItem("name");
   myName;
   

   7 không còn tồn tại trong bộ nhớ 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 tải trang (và ngay cả khi trình duyệt bị tắt, trong trường hợp

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 là một trình duyệt khác với mẫu bạn có hướng dẫn này mở! Điều này sẽ làm cho nó dễ dàng hơn để đối phó.
2. Nhập các 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ả về.
3. Bây giờ đóng trình duyệt và mở nó 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 đó được mở lại.

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

Có một kho lưu trữ dữ liệu riêng cho mỗi miền (mỗi địa chỉ web riêng biệt được tải trong 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, nó sẽ không có sẵn cho trang web khác.

Điều này có ý nghĩa - 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 được tìm thấy này bằng cách viết một ví dụ làm việc để 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 một lời chào được cá nhân hóa. Trạng thái này cũng sẽ tồn tại trên các trang tải lại trang/trình duyệt, vì tên được lưu trữ trong lưu trữ web.

Bạn có thể tìm thấy ví dụ HTML tại Personal-Leting.html-Điều này chứa một trang web có tiêu đề, nội dung và chân trang và 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 cách thức hoạt động của nó.

1. Đầu tiên, hãy tạo một bản sao cục bộ của tệp.html cá nhân của chúng tôi 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 một tệp JavaScript có tên

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

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

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   3. Chúng ta cần tạo điều này và viết mã JavaScript của chúng tôi vào đó. Tạo một tệp

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   2 trong cùng thư mục với tệp HTML của bạn.
3. Chúng tôi 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 tôi cần để thao tác trong ví dụ này - chúng tôi sẽ tạo tất cả chúng dưới dạng hằng số, vì các tài liệu tham khảo này không cần phải 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:

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

4. Tiếp theo, chúng ta cần bao gồm một trình nghe 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 ta muốn. Thêm đoạn trích này bên dưới mã trước đó của bạn:

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

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

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   5, sau đó chạy một hàm có tên

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   6 sẽ xử lý cập nhật trang web thực tế chữ. Thêm điều này vào cuối mã của bạn:

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

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 hàm khi nút "Quên" được nhấp - điều này chỉ được hiển thị sau khi nút "Say Hello" đã được nhấp (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

   let myName = localStorage.getItem("name");
   myName;
   

   7 khỏi lưu trữ web bằng

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   8, sau đó chạy lại

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   6 để cập nhật màn hình. Thêm điều này vào đáy:

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   0

7. Bây giờ là lúc để xác định chức năng

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

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

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   1 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á thành

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   2; Nếu không, cuộc gọi sẽ đánh giá thành

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   3. Nếu cuộc gọi đánh giá thành

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   2, chúng tôi sẽ hiển thị một 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 đánh giá thành

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   1

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

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

   6 khi trang được tải. Nếu chúng ta 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 trên trang tải lại. Thêm phần sau vào cuối mã của bạn:

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 chạy trực tiếp ở đây.

Lưu ý: Trong dòng

localStorage.removeItem("name");
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;

localStorage.removeItem("name");
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;

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

API IndexEdDB (đôi khi viết tắt IDB) là một hệ thống cơ sở dữ liệu hoàn chỉnh có sẵn trong trình duyệt trong đó bạn có thể lưu trữ dữ liệu liên quan phức tạp, 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à khá nhiều thứ khác trong một thể hiện lập chỉ mục.

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

Tuy nhiên, điều này có chi phí: IndexEdDB 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ự chỉ làm trầy xước bề mặt của những gì nó có khả năng, nhưng chúng tôi sẽ cho bạn đủ để bắt đầu.

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

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

Ứ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 cơ thể, mỗi chữ cái có thể chỉnh sửa riêng lẻ. Mã JavaScript chúng tôi sẽ trải qua dưới đây có các nhận xét chi tiết để giúp bạn hiểu những 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

   let myName = localStorage.getItem("name");
   myName;
   

   0,

   let myName = localStorage.getItem("name");
   myName;
   

   1 và

   let myName = localStorage.getItem("name");
   myName;
   

   2 của chúng tôi thành 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 định nghĩa một trang web có tiêu đề và chân trang, cũng như khu vực nội dung chính chứa một nơi để hiển thị ghi chú và một biểu mẫu để nhập các ghi chú mới vào cơ sở dữ liệu. CSS cung cấp một số kiểu dáng để làm cho nó rõ ràng 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ử

   let myName = localStorage.getItem("name");
   myName;
   

   3 Các ghi chú sẽ được hiển thị trong các phần tử và phần tử

   let myName = localStorage.getItem("name");
   myName;
   

   4, chính

   let myName = localStorage.getItem("name");
   myName;
   

   5 và

   let myName = localStorage.getItem("name");
   myName;
   

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

   localStorage.removeItem("name");
   myName = localStorage.getItem("name");
   myName;
   

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

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

Bây giờ chúng ta hãy xem xét những gì chúng ta phải làm ở nơi đầu 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 không đổi, thêm các dòng sau:

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   2
   Ở đây chúng tôi đang khai báo một biến gọi là

   let myName = localStorage.getItem("name");
   myName;
   

   8 - 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 điều này ở một vài nơi, vì vậy chúng tôi đã tuyên bố nó trên toàn cầu ở đây để làm cho mọi thứ dễ dàng hơn.
2. Tiếp theo, thêm những điều sau:

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

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

   let myName = localStorage.getItem("name");
   myName;
   

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

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   0. 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 suốt IndexedDB. Hoạt động cơ sở dữ liệu cần có 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 hoạt động cơ sở dữ liệu không đồng bộ, có 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 được thông báo khi chúng hoàn thành. Để xử lý điều này trong IndexEdDB, bạn tạo một đối tượng yêu cầu (có thể được gọi là bất cứ thứ gì bạn thích - chúng tôi gọi nó là

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   1 ở đây, vì vậy rõ ràng nó là 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, thất bại, v.v., mà bạn sẽ thấy khi sử dụng bên dưới.

   Lưu ý: 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ược đồ khác nhau được chỉ định bên trong trình xử lý

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   2 (xem bên dưới), v.v. Nâng cấp cơ sở dữ liệu trong hướng dẫn này. The version number is important. If you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   2 handler (see below), etc. We won't cover upgrading databases in this tutorial.

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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

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

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   3 sẽ chạy nếu hệ thống quay lại nói 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 tin nhắn vào bảng điều khiển JavaScript. Trình xử lý sự kiện

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

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

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

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

   let myName = localStorage.getItem("name");
   myName;
   

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

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

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

   let myName = localStorage.getItem("name");
   myName;
   

   3. 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

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

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

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   2. 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 mã sau, bên dưới trình xử lý trước đó của bạn:

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   5
   Đâ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; Đó là, tập hợp các cột (hoặc trường) mà nó chứa. Ở đâ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

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   1 của mục tiêu sự kiện (

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

   2), là đối tượng

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

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

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

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

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   4, nhưng chúng tôi cần phải làm điều này một cách riêng biệt ở đây vì trình xử lý sự kiện

   // create needed constants
   const rememberDiv = document.querySelector(".remember");
   const forgetDiv = document.querySelector(".forget");
   const form = document.querySelector("form");
   const nameInput = document.querySelector("#entername");
   const submitBtn = document.querySelector("#submitname");
   const forgetBtn = document.querySelector("#forgetname");
   
   const h2 = document.querySelector("h2");
   const personalGreeting = document.querySelector(".personal-greeting");
   

   2 (nếu cần) Không làm điều này. Sau đó, chúng tôi sử dụng

   // Stop the form from submitting when a button is pressed
   form.addEventListener("submit", (e) => e.preventDefault());
   

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

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   0. Đ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 cho nó các ghi chú tên và cũng chỉ định một trường khóa

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   1 có tên là

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   2 - trong mỗi bản ghi mới, điều này sẽ tự động được đưa ra một giá trị được tăng lên - nhà phát triển không cần thiết lập điều này một cách rõ ràng. Là khóa, trường

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   2 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ị bản ghi. Chúng tôi cũng tạo hai chỉ mục khác (trường) bằng phương pháp

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   4:

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   5 (sẽ chứa một tiêu đề cho mỗi ghi chú) và

   // run function when the 'Say hello' button is clicked
   submitBtn.addEventListener("click", () => {
     // store the entered name in web storage
     localStorage.setItem("name", nameInput.value);
     // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
     nameDisplayCheck();
   });
   

   6 (sẽ chứa văn bản cơ thể 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 đồ sẽ được biểu diễn dưới dạng một đối tượng dọc theo các dòng sau:

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

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

Bây giờ chúng ta 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 biểu mẫu trên trang của chúng tôi.

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

// run function when the 'Say hello' button is clicked
submitBtn.addEventListener("click", () => {
  // store the entered name in web storage
  localStorage.setItem("name", nameInput.value);
  // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
  nameDisplayCheck();
});

// run function when the 'Say hello' button is clicked
submitBtn.addEventListener("click", () => {
  // store the entered name in web storage
  localStorage.setItem("name", nameInput.value);
  // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
  nameDisplayCheck();
});

let myName = localStorage.getItem("name");
myName;

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

Bây giờ chúng ta hãy xác định chức năng

// run function when the 'Say hello' button is clicked
submitBtn.addEventListener("click", () => {
  // store the entered name in web storage
  localStorage.setItem("name", nameInput.value);
  // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
  nameDisplayCheck();
});

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

Điều này khá phức tạp; Phá vỡ nó, chúng tôi:

• Chạy

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  01 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ẽ gây ra một trang 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ó với các giá trị từ các đầu vào biểu mẫu. Lưu ý rằng chúng tôi không phải bao gồm một cách rõ ràng giá trị

  // run function when the 'Say hello' button is clicked
  submitBtn.addEventListener("click", () => {
    // store the entered name in web storage
    localStorage.setItem("name", nameInput.value);
    // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
    nameDisplayCheck();
  });
  

  2-như chúng tôi đã giải thích trước đó, điều này là tự động dân cư.
• Mở giao dịch

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

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

  // run function when the 'Say hello' button is clicked
  submitBtn.addEventListener("click", () => {
    // store the entered name in web storage
    localStorage.setItem("name", nameInput.value);
    // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
    nameDisplayCheck();
  });
  

  0 bằng phương thức

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  05. Đối tượng giao dịch này cho phép chúng tôi truy cập vào cửa hàng đối tượng để chúng tôi có thể làm điều gì đó với nó, ví dụ: Thêm một bản ghi mới.
• Truy cập lưu trữ đối tượng bằng phương thức

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  06, lưu kết quả trong biến

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  07.
• Thêm bản ghi mới vào cơ sở dữ liệu bằng

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  08. Điều này tạo ra một đối tượng yêu cầu, theo cùng một kiểu 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

  // Stop the form from submitting when a button is pressed
  form.addEventListener("submit", (e) => e.preventDefault());
  

  3 và

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  10 để 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 tôi chạy lại chức năng

  // create needed constants
  const rememberDiv = document.querySelector(".remember");
  const forgetDiv = document.querySelector(".forget");
  const form = document.querySelector("form");
  const nameInput = document.querySelector("#entername");
  const submitBtn = document.querySelector("#submitname");
  const forgetBtn = document.querySelector("#forgetname");
  
  const h2 = document.querySelector("h2");
  const personalGreeting = document.querySelector(".personal-greeting");
  

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

Hiển thị dữ liệu

Chúng tôi đã tham khảo

// create needed constants
const rememberDiv = document.querySelector(".remember");
const forgetDiv = document.querySelector(".forget");
const form = document.querySelector("form");
const nameInput = document.querySelector("#entername");
const submitBtn = document.querySelector("#submitname");
const forgetBtn = document.querySelector("#forgetname");

const h2 = document.querySelector("h2");
const personalGreeting = document.querySelector(".personal-greeting");

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

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

• Trước tiên, chúng tôi làm trống nội dung của phần tử

  let myName = localStorage.getItem("name");
  myName;
  

  3, sau đó sau đó điền vào nó với nội dung được cập nhật. Nếu bạn không làm điều này, bạn sẽ có một danh sách lớn nội dung trùng lặp được thêm vào với mỗi bả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

  // run function when the 'Say hello' button is clicked
  submitBtn.addEventListener("click", () => {
    // store the entered name in web storage
    localStorage.setItem("name", nameInput.value);
    // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
    nameDisplayCheck();
  });
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  05 và

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  06 như chúng tôi đã làm trong

  // run function when the 'Say hello' button is clicked
  submitBtn.addEventListener("click", () => {
    // store the entered name in web storage
    localStorage.setItem("name", nameInput.value);
    // run nameDisplayCheck() to sort out displaying the personalized greetings and updating the form display
    nameDisplayCheck();
  });
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  18 để mở yêu cầu 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 cửa hàng đối tượng. Chúng tôi chuỗi xử lý sự kiện

  // create needed constants
  const rememberDiv = document.querySelector(".remember");
  const forgetDiv = document.querySelector(".forget");
  const form = document.querySelector("form");
  const nameInput = document.querySelector("#entername");
  const submitBtn = document.querySelector("#submitname");
  const forgetBtn = document.querySelector("#forgetname");
  
  const h2 = document.querySelector("h2");
  const personalGreeting = document.querySelector(".personal-greeting");
  

  4 đến cuối dòng này để làm cho mã này súc tích hơn - khi con trỏ được trả về thành công, trình xử lý đượ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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  20) bằng cách sử dụng

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  22) không - nếu vậy, 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ử

  let myName = localStorage.getItem("name");
  myName;
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  24 mà chúng tôi sẽ xem xét trong phần tiếp theo.
• Vào cuối khối

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  25, chúng tôi sử dụng phương thức

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  29 sẽ trả về

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  30, và do đó khối

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  25. Khối này kiểm tra xem có ghi chú nào được chèn vào

  let myName = localStorage.getItem("name");
  myName;
  

  3 - nếu không, nó chèn một thông báo để nói rằng không có ghi chú nào được lưu trữ.

Xóa một ghi chú

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

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

localStorage.setItem("name", "Chris");

• 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 lấy ID của bản ghi sẽ bị xóa bằng cách sử dụng

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  36 trên

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  37 khi được hiển thị lần đầu tiên. Tuy nhiên, chúng tôi cần phải truyền thuộc tính thông qua đối tượng

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  38 tích hợp toàn cầu vì nó là chuỗi dữ liệu và do đó sẽ không được cơ sở dữ liệu nhận ra, 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 đây và sử dụng phương thức

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

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

  ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
  

  37 của DOM và một lần nữa kiểm tra xem liệu

  let myName = localStorage.getItem("name");
  myName;
  

  3 có trống không, chèn một 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 rắc rối với nó, hãy kiểm tra nó so với ví dụ trực tiếp của chúng tôi (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 hơn chỉ là 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. Và việc đạt được không khó hơn nhiều so với bất kỳ loại dữ liệu nào khác.

Để chứng minh cách thực hiện, chúng tôi đã viết một ví dụ khác có tên là IndexedDB Video Store (xem nó cũng đang chạy trực tiếp ở đây). Khi bạn lần đầu tiên chạy ví dụ, 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 và sau đó hiển thị các video trong UI bên trong các phần tử

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

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

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

   localStorage.setItem("name", "Chris");
   

   1

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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   43. Đ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 bởi mỗi tên từ cơ sở dữ liệu

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   44. 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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   45 có đánh giá thành

   localStorage.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   48 để đặt chúng vào UI. Nếu không, tên video được chuyển đến hàm

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   49, bạn đã đoán nó, lấy video từ mạng.

   localStorage.setItem("name", "Chris");
   

   2

3. Đoạn trích sau đây được lấy từ bên trong

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   49 - ở đâ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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   51 riêng biệt. Sau đó, chúng tôi sử dụng phương pháp

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   52 để trích xuất cơ thể của mỗi phản hồi dưới dạng blob, cho chúng tôi một biểu diễn đối tượng của các video có thể được lưu trữ và hiển thị sau này. Mặc dù vậy, chúng tôi có một vấn đề ở đây - 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 đã hoàn thành. May mắn thay, có một phương pháp tích hợp xử lý một vấn đề như vậy-

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   53. Điều này có một đối số - các tài liệu tham khảo cho tất cả các lời hứa cá nhân mà bạn muốn kiểm tra sự hoàn thành được đặt trong một mảng - và trả lại 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ý

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   48 như chúng tôi đã làm trước đây để hiển thị các video trong UI, sau đó chúng tôi cũng gọi hàm

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

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

   localStorage.setItem("name", "Chris");
   

   3

4. Hãy nhìn vào

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   56 đầu tiên. Điều này rất giống với mẫu 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ở giao dịch

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   03 và nhận tham chiếu đến cửa hàng đối tượng

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   59 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ó Sử dụng

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   08.

   localStorage.setItem("name", "Chris");
   

   4

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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   48, tạo ra các yếu tố DOM cần thiết để chèn video vào UI và sau đó nối chúng vào trang. Các phần thú vị nhất của điều này là những phần được hiển thị dưới đây - để thực sự hiển thị các đốm video của chúng tôi trong phần tử

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   42, chúng tôi cần tạo các URL đối tượng (URL nội bộ trỏ đến các đốm video được lưu trữ trong bộ nhớ) bằng phương pháp

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

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

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   65 của phần tử

   ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js
   

   64 và nó hoạt động tốt.

   localStorage.setItem("name", "Chris");
   

   5

Lưu trữ tài sản ngoại tuyến

Ví dụ trên đã cho thấy cách tạo một ứng dụng sẽ lưu trữ các tài sản lớn trong cơ sở dữ liệu IndexedDB, tránh cần phải tải chúng nhiều lần. Đây đã là một cải tiến tuyệt vời cho trải nghiệm người dùng, nhưng vẫn còn một điều còn thiếu - 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ó không có kết nối mạng.

Đây là nơi nhân viên dịch vụ và API bộ đệm liên quan chặt chẽ đến.

Nhân viên dịch vụ là một tệp JavaScript được đăng ký theo một nguồn gốc cụ thể (trang web hoặc một phần của trang web tại một tên miền nhất định) khi nó được truy cập bởi trình duyệt. Khi được đăng ký, nó có thể kiểm soát các trang có sẵn ở 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à các yêu cầu chặn 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 đối với nó (xem sử dụng ý tưởng trường hợp), nhưng ví dụ cổ điển là lưu các phản hồi mạng ngoại tuyến và sau đó cung cấp những người đó để đáp ứng 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, với 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ụ về nhân viên dịch vụ

Chúng ta hãy xem một ví dụ, để cung cấp 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ụ Store Store mà chúng tôi đã thấy trong phần trước - các chức năng này 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 nhân viên dịch vụ, cho phép ví dụ chạy ngoại tuyến!

Xem IndexedDB Store Store 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 chút mã được đặt trong tệp JavaScript chính (xem index.js). Đầu 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

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

localStorage.setItem("name", "Chris");

Lưu ý: Đường dẫn đã cho đến tệp

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

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

Lần tiếp theo, bất kỳ trang nào trong sự kiểm soát của nhân viên dịch vụ được truy cập (ví dụ: khi ví dụ được tải lại), nhân viên dịch vụ được cài đặt so với trang đó, có 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

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

Chúng ta hãy xem một ví dụ, trong tệp SW.JS (nhân viên dịch vụ). Bạn sẽ thấy rằng trình nghe cài đặt được đăng ký so với

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

Bên trong trình xử lý

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

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

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

let myName = localStorage.getItem("name");
myName;

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

localStorage.setItem("name", "Chris");

Đó là bây giờ, cài đặt đã hoàn thành.

Trả lời các yêu cầu tiếp theo

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

Đây là những gì mã thứ hai của mã trong

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

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

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

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

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

ln -s /path/to/your/actual/js/file/javascript.js /path/to/your/symlink/javascript.js

Nếu một trận đấu được tìm thấy, chúng tôi trả lại nó dưới dạng phản hồi tùy chỉnh. Nếu không, chúng tôi sẽ tìm kiếm () phản hồi từ mạng và thay vào đó trả về.

localStorage.setItem("name", "Chris");

Và đó là nó cho nhân viên dịch vụ của chúng tôi. Có toàn bộ tải nhiều hơn bạn có thể làm với họ - để biết thêm chi tiết hơn, hãy xem Sách nấu ăn 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 một nhân viên dịch vụ và ngoại tuyến vào ứng dụng web của bạn, đã 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 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 của bạn/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.
• Truy cập DevTools, sau đó chọn ứng dụng> Nhân viên dịch vụ, sau đó kiểm tra 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 trang ví dụ của mình một lần nữa, bạn vẫn sẽ thấy nó tải tốt. Mọi thứ đều được lưu trữ ngoại tuyến - tài sản trang trong bộ đệm và các video trong cơ sở dữ liệu IndexedDB.

Bản tóm tắt

Đó là nó bây giờ. Chúng tôi hy vọng bạn đã thấy các công nghệ lưu trữ phía máy khách của chúng tôi hữu ích.

Xem thêm

Trong mô -đun này