Hướng dẫn how can javascript store data locally? - javascript có thể lưu trữ dữ liệu cục bộ như thế nào?

Client-side storage?

Elsewhere in the MDN learning area we talked about the difference between static sites and dynamic sites. Most major modern web sites are dynamic — they store data on the server using some kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the resulting HTML to the client to be displayed by the user's browser.

Client-side storage works on similar principles, but has different uses. It consists of JavaScript APIs that allow you to store data on the client (i.e. on the user's machine) and then retrieve it when needed. This has many distinct uses, such as:

• Personalizing site preferences (e.g. showing a user's choice of custom widgets, color scheme, or font size).
• Persisting previous site activity (e.g. storing the contents of a shopping cart from a previous session, remembering if a user was previously logged in).
• Saving data and assets locally so a site will be quicker (and potentially less expensive) to download, or be usable without a network connection.
• Saving web application generated documents locally for use offline

Often client-side and server-side storage are used together. For example, you could download a batch of music files (perhaps used by a web game or music player application), store them inside a client-side database, and play them as needed. The user would only have to download the music files once — on subsequent visits they would be retrieved from the database instead.

Note: 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.

Old school: Cookies

The concept of client-side storage has been around for a long time. Since the early days of the web, sites have used cookies to store information to personalize user experience on websites. They're the earliest form of client-side storage commonly used on the web.

These days, there are easier mechanisms available for storing client-side data, therefore we won't be teaching you how to use cookies in this article. However, this does not mean cookies are completely useless on the modern-day web — they are still used commonly to store data related to user personalization and state, e.g. session IDs and access tokens. For more information on cookies see our Using HTTP cookies article.

New school: Web Storage and IndexedDB

The "easier" features we mentioned above are as follows:

• The Web Storage API provides a mechanism for storing and retrieving smaller, data items consisting of a name and a corresponding value. This is useful when you just need to store some simple data, like the user's name, whether they are logged in, what color to use for the background of the screen, etc.
• The IndexedDB API provides the browser with a complete database system for storing complex data. This can be used for things from complete sets of customer records to even complex data types like audio or video files.

You'll learn more about these APIs below.

The Cache API

The

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

Use of Cache and Service Workers is an advanced topic, and we won't be covering it in great detail in this article, although we will show an example in the Offline asset storage section below.

Storing simple data — web storage

The Web Storage API is very easy to use — you store simple name/value pairs of data (limited to strings, numbers, etc.) and retrieve these values when needed.

Basic syntax

Let's show you how:

1. First, go to our web storage blank template on GitHub (open this in a new tab).
2. Open the JavaScript console of your browser's developer tools.
3. All of your web storage data is contained within two object-like structures inside the browser:

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

   8 and

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

   9. The first one persists data for as long as the browser is open (the data is lost when the browser is closed) and the second one persists data even after the browser is closed and then opened again. We'll use the second one in this article as it is generally more useful. The

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

   0 method allows you to save a data item in storage — it takes two parameters: the name of the item, and its value. Try typing this into your JavaScript console (change the value to your own name, if you wish!):

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

4. Phương thức

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

   1 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

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

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

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

   3.
5. Phương thức

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

   4 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ề

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

   5 - mục

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

   3 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

localStorage.removeItem("name");
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.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

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

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

   9. 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.setItem("name", "Chris");
   let myName = localStorage.getItem("name");
   myName;
   

   8 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 bộ nhớ web bằng cách sử dụng

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

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

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

   2 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

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

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

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

   4, sau đó chạy lại

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

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

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

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

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

   2. Ở đâ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

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

   7 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

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

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

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

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

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

   8, 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

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

   9, 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:

   // define the nameDisplayCheck() function
   function nameDisplayCheck() {
     // check whether the 'name' data item is stored in web Storage
     if (localStorage.getItem("name")) {
       // If it is, display personalized greeting
       const name = localStorage.getItem("name");
       h2.textContent = `Welcome, ${name}`;
       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
       // hide the 'remember' part of the form and show the 'forget' part
       forgetDiv.style.display = "block";
       rememberDiv.style.display = "none";
     } else {
       // if not, display generic greeting
       h2.textContent = "Welcome to our website ";
       personalGreeting.textContent =
         "Welcome to our website. We hope you have fun while you are here.";
       // hide the 'forget' part of the form and show the 'remember' part
       forgetDiv.style.display = "none";
       rememberDiv.style.display = "block";
     }
   }
   

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

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

   2 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.setItem("name", "Chris");
let myName = localStorage.getItem("name");
myName;

// 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");

// 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");

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

// 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");

// 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");

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

   // 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");
   

   6,

   // 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 và

   // 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");
   

   8 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ử

   // 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");
   

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

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

   0, chính

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

   1 và

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

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

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

   8. 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:

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

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

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

   4 - 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:

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

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

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

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

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

   6. 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à

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

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

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

   8 (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

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

   8 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:

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

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

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

   9 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

   // 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 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

   // 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, 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

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

   4 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à

   // 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();
   });
   

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

   // 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");
   

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

   // 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();
   });
   

   3 đượ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:

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

   8. 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:

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

   3
   Đâ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

   // 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();
   });
   

   7 của mục tiêu 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();
   });
   

   8), là đố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();
   });
   

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

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   0 bên trong 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();
   });
   

   0, 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

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

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

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   5 để 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 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   6. Đ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 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   7 có tên

   // run function when the 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   8 - 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 'Forget' button is clicked
   forgetBtn.addEventListener("click", () => {
     // Remove the stored name from web storage
     localStorage.removeItem("name");
     // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
     nameDisplayCheck();
   });
   

   8 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

   // define the nameDisplayCheck() function
   function nameDisplayCheck() {
     // check whether the 'name' data item is stored in web Storage
     if (localStorage.getItem("name")) {
       // If it is, display personalized greeting
       const name = localStorage.getItem("name");
       h2.textContent = `Welcome, ${name}`;
       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
       // hide the 'remember' part of the form and show the 'forget' part
       forgetDiv.style.display = "block";
       rememberDiv.style.display = "none";
     } else {
       // if not, display generic greeting
       h2.textContent = "Welcome to our website ";
       personalGreeting.textContent =
         "Welcome to our website. We hope you have fun while you are here.";
       // hide the 'forget' part of the form and show the 'remember' part
       forgetDiv.style.display = "none";
       rememberDiv.style.display = "block";
     }
   }
   

   0:

   // define the nameDisplayCheck() function
   function nameDisplayCheck() {
     // check whether the 'name' data item is stored in web Storage
     if (localStorage.getItem("name")) {
       // If it is, display personalized greeting
       const name = localStorage.getItem("name");
       h2.textContent = `Welcome, ${name}`;
       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
       // hide the 'remember' part of the form and show the 'forget' part
       forgetDiv.style.display = "block";
       rememberDiv.style.display = "none";
     } else {
       // if not, display generic greeting
       h2.textContent = "Welcome to our website ";
       personalGreeting.textContent =
         "Welcome to our website. We hope you have fun while you are here.";
       // hide the 'forget' part of the form and show the 'remember' part
       forgetDiv.style.display = "none";
       rememberDiv.style.display = "block";
     }
   }
   

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

   // define the nameDisplayCheck() function
   function nameDisplayCheck() {
     // check whether the 'name' data item is stored in web Storage
     if (localStorage.getItem("name")) {
       // If it is, display personalized greeting
       const name = localStorage.getItem("name");
       h2.textContent = `Welcome, ${name}`;
       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
       // hide the 'remember' part of the form and show the 'forget' part
       forgetDiv.style.display = "block";
       rememberDiv.style.display = "none";
     } else {
       // if not, display generic greeting
       h2.textContent = "Welcome to our website ";
       personalGreeting.textContent =
         "Welcome to our website. We hope you have fun while you are here.";
       // hide the 'forget' part of the form and show the 'remember' part
       forgetDiv.style.display = "none";
       rememberDiv.style.display = "block";
     }
   }
   

   2 (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:

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

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

// define the nameDisplayCheck() function
function nameDisplayCheck() {
  // check whether the 'name' data item is stored in web Storage
  if (localStorage.getItem("name")) {
    // If it is, display personalized greeting
    const name = localStorage.getItem("name");
    h2.textContent = `Welcome, ${name}`;
    personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
    // hide the 'remember' part of the form and show the 'forget' part
    forgetDiv.style.display = "block";
    rememberDiv.style.display = "none";
  } else {
    // if not, display generic greeting
    h2.textContent = "Welcome to our website ";
    personalGreeting.textContent =
      "Welcome to our website. We hope you have fun while you are here.";
    // hide the 'forget' part of the form and show the 'remember' part
    forgetDiv.style.display = "none";
    rememberDiv.style.display = "block";
  }
}

// define the nameDisplayCheck() function
function nameDisplayCheck() {
  // check whether the 'name' data item is stored in web Storage
  if (localStorage.getItem("name")) {
    // If it is, display personalized greeting
    const name = localStorage.getItem("name");
    h2.textContent = `Welcome, ${name}`;
    personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
    // hide the 'remember' part of the form and show the 'forget' part
    forgetDiv.style.display = "block";
    rememberDiv.style.display = "none";
  } else {
    // if not, display generic greeting
    h2.textContent = "Welcome to our website ";
    personalGreeting.textContent =
      "Welcome to our website. We hope you have fun while you are here.";
    // hide the 'forget' part of the form and show the 'remember' part
    forgetDiv.style.display = "none";
    rememberDiv.style.display = "block";
  }
}

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

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

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

// define the nameDisplayCheck() function
function nameDisplayCheck() {
  // check whether the 'name' data item is stored in web Storage
  if (localStorage.getItem("name")) {
    // If it is, display personalized greeting
    const name = localStorage.getItem("name");
    h2.textContent = `Welcome, ${name}`;
    personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
    // hide the 'remember' part of the form and show the 'forget' part
    forgetDiv.style.display = "block";
    rememberDiv.style.display = "none";
  } else {
    // if not, display generic greeting
    h2.textContent = "Welcome to our website ";
    personalGreeting.textContent =
      "Welcome to our website. We hope you have fun while you are here.";
    // hide the 'forget' part of the form and show the 'remember' part
    forgetDiv.style.display = "none";
    rememberDiv.style.display = "block";
  }
}

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

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

• Chạy

  // define the nameDisplayCheck() function
  function nameDisplayCheck() {
    // check whether the 'name' data item is stored in web Storage
    if (localStorage.getItem("name")) {
      // If it is, display personalized greeting
      const name = localStorage.getItem("name");
      h2.textContent = `Welcome, ${name}`;
      personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
      // hide the 'remember' part of the form and show the 'forget' part
      forgetDiv.style.display = "block";
      rememberDiv.style.display = "none";
    } else {
      // if not, display generic greeting
      h2.textContent = "Welcome to our website ";
      personalGreeting.textContent =
        "Welcome to our website. We hope you have fun while you are here.";
      // hide the 'forget' part of the form and show the 'remember' part
      forgetDiv.style.display = "none";
      rememberDiv.style.display = "block";
    }
  }
  

  7 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 'Forget' button is clicked
  forgetBtn.addEventListener("click", () => {
    // Remove the stored name from web storage
    localStorage.removeItem("name");
    // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
    nameDisplayCheck();
  });
  

  8-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

  // define the nameDisplayCheck() function
  function nameDisplayCheck() {
    // check whether the 'name' data item is stored in web Storage
    if (localStorage.getItem("name")) {
      // If it is, display personalized greeting
      const name = localStorage.getItem("name");
      h2.textContent = `Welcome, ${name}`;
      personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
      // hide the 'remember' part of the form and show the 'forget' part
      forgetDiv.style.display = "block";
      rememberDiv.style.display = "none";
    } else {
      // if not, display generic greeting
      h2.textContent = "Welcome to our website ";
      personalGreeting.textContent =
        "Welcome to our website. We hope you have fun while you are here.";
      // hide the 'forget' part of the form and show the 'remember' part
      forgetDiv.style.display = "none";
      rememberDiv.style.display = "block";
    }
  }
  

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

  // run function when the 'Forget' button is clicked
  forgetBtn.addEventListener("click", () => {
    // Remove the stored name from web storage
    localStorage.removeItem("name");
    // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
    nameDisplayCheck();
  });
  

  6 bằng phương thức

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

  01. Đố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

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

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

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

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

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

  04. Đ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

  // 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();
  });
  

  9 và

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

  06 để 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

  // 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();
  });
  

  3 để 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

// 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;

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ử

  // 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");
  

  9, 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 'Forget' button is clicked
  forgetBtn.addEventListener("click", () => {
    // Remove the stored name from web storage
    localStorage.removeItem("name");
    // run nameDisplayCheck() to sort out displaying the generic greeting again and updating the form display
    nameDisplayCheck();
  });
  

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

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

  01 và

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

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

  // define the nameDisplayCheck() function
  function nameDisplayCheck() {
    // check whether the 'name' data item is stored in web Storage
    if (localStorage.getItem("name")) {
      // If it is, display personalized greeting
      const name = localStorage.getItem("name");
      h2.textContent = `Welcome, ${name}`;
      personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
      // hide the 'remember' part of the form and show the 'forget' part
      forgetDiv.style.display = "block";
      rememberDiv.style.display = "none";
    } else {
      // if not, display generic greeting
      h2.textContent = "Welcome to our website ";
      personalGreeting.textContent =
        "Welcome to our website. We hope you have fun while you are here.";
      // hide the 'forget' part of the form and show the 'remember' part
      forgetDiv.style.display = "none";
      rememberDiv.style.display = "block";
    }
  }
  

  4, 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

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

  14 để 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

  // 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 đế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

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

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

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

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

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

  18) 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ử

  // 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");
  

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

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

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

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

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

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

  22 để 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

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

  21. 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 đó

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

  24 sẽ đượ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;
  

  25 sẽ trả về

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

  26 và do đó, khối

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

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

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

  21. Khối này kiểm tra xem có ghi chú nào được chèn và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");
  

  9 - 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

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

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

  31 - 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;
  

  32 trên

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

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

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

  34 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

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

  35 để 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

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

  33 của DOM và một lần nữa kiểm tra xem 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");
  

  9 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ử

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

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:

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

   9

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

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

   39. Đ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

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

   40. 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;
   

   41 có đánh giá thành

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

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

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

   26), 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

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

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

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

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

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

   0

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

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

   45 - ở đâ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;
   

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

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

   48 để 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-

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

   49. Đ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ý

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

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

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

   44 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

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

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

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

   1

4. Chúng ta hãy nhìn vào

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

   52 đầ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ở một giao dịch

   // define the nameDisplayCheck() function
   function nameDisplayCheck() {
     // check whether the 'name' data item is stored in web Storage
     if (localStorage.getItem("name")) {
       // If it is, display personalized greeting
       const name = localStorage.getItem("name");
       h2.textContent = `Welcome, ${name}`;
       personalGreeting.textContent = `Welcome to our website, ${name}! We hope you have fun while you are here.`;
       // hide the 'remember' part of the form and show the 'forget' part
       forgetDiv.style.display = "block";
       rememberDiv.style.display = "none";
     } else {
       // if not, display generic greeting
       h2.textContent = "Welcome to our website ";
       personalGreeting.textContent =
         "Welcome to our website. We hope you have fun while you are here.";
       // hide the 'forget' part of the form and show the 'remember' part
       forgetDiv.style.display = "none";
       rememberDiv.style.display = "block";
     }
   }
   

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

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

   55 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

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

   04.

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

   2

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

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

   44, 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ử

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

   38, 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

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

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

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

   61 của phần tử

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

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

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

   3

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

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;

Lưu ý: Đườ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;

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

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

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

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 tôi thấy API Cache 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;

Đó 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

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 đă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

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

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