Modern web browsers support a number of ways for web sites to store data on the user's computer — with the
user's permission — then retrieve it when necessary. This lets you persist data for long-term storage, save sites or documents for offline use, retain user-specific settings for your site, and more. This article explains the very basics of how these work. 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: 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. 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. The "easier" features we mentioned above are as follows: You'll learn more about these APIs below. The
Client-side storage?
Old school:
Cookies
New school: Web Storage and IndexedDB
The Cache API
7 API is designed for storing HTTP responses to specific requests, and is very useful for doing things like storing website assets offline so the site can subsequently be used without a network connection. Cache is usually used in combination with the Service Worker API, although it doesn't have to be.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:
- First, go to our web storage blank template on GitHub [open this in a new tab].
- Open the JavaScript console of your browser's developer tools.
- All of your web storage data is contained within two object-like structures inside the browser:
8 andlocalStorage.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. ThelocalStorage.removeItem["name"]; 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"]; let myName = localStorage.getItem["name"]; myName;
localStorage.setItem["name", "Chris"];
- Phương thức
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:localStorage.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
Khi nhập dòng thứ hai, bạn sẽ thấy biếnlet myName = localStorage.getItem["name"]; myName;
2 hiện chứa giá trị của mục dữ liệulocalStorage.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
3.localStorage.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
- Phương thức
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.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
Dòng thứ ba bây giờ sẽ trả vềlocalStorage.removeItem["name"]; myName = localStorage.getItem["name"]; myName;
5 - mụclocalStorage.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
3 không còn tồn tại trong bộ nhớ web.localStorage.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
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;
9]. Hãy xem xét điều này trong hành động.- 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ó.
- Nhập các dòng này vào bảng điều khiển JavaScript của trình duyệt:
Bạn sẽ thấy mục tên được trả về.localStorage.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
- Bây giờ đóng trình duyệt và mở nó lại.
- Nhập lại các dòng sau:
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.let myName = localStorage.getItem["name"]; myName;
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ó.
- Đầ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.
- 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
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ệplocalStorage.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.localStorage.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
- 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"];
- 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[]];
- 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
1, sau đó chạy một hàm có tênlet 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:let myName = localStorage.getItem["name"]; myName;
// 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[]; }];
- 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
3 khỏi lưu trữ web bằnglocalStorage.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
4, sau đó chạy lạilet myName = localStorage.getItem["name"]; myName;
2 để cập nhật màn hình. Thêm điều này vào đáy:let myName = localStorage.getItem["name"]; myName;
// 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[]; }];
- Bây giờ là lúc để xác định chức năng
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ụnglet 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ànhlet myName = localStorage.getItem["name"]; myName;
8; Nếu không, cuộc gọi sẽ đánh giá thànhlet myName = localStorage.getItem["name"]; myName;
9. Nếu cuộc gọi đánh giá thànhlet 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ànhlet 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:let myName = localStorage.getItem["name"]; myName;
// 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"; } }
- 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
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:let myName = localStorage.getItem["name"]; myName;
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
9 của nguồn cho phiên bản đã hoàn thành của chúng tôi, thuộc tính localStorage.setItem["name", "Chris"];
let myName = localStorage.getItem["name"];
myName;
4 chỉ định rằ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"];
5 sẽ không thực thi cho đến khi trang hoàn thành tải. In the line // 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;
9 of the source for our finished version, 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"];
4 attribute specifies that the contents of 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"];
5 element will not execute until the page has finished
loading.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
- Trước hết, tạo các bản sao cục bộ của các tệp
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.// 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"];
- 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ử
9 Các ghi chú sẽ được hiển thị trong các phần tử và cơ thể// 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, 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.// Stop the form from submitting when a button is pressed form.addEventListener["submit", [e] => e.preventDefault[]];
- Đổi tên tệp JavaScript của bạn thành
8. Bây giờ bạn đã sẵn sàng để bắt đầu thêm mã vào nó.localStorage.setItem["name", "Chris"]; let myName = localStorage.getItem["name"]; myName;
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.
- Bên dưới các khai báo không đổi, thêm các dòng sau:
0Ở đây chúng tôi đang khai báo một biến gọi làlet myName = localStorage.getItem["name"]; myName;
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.// Stop the form from submitting when a button is pressed form.addEventListener["submit", [e] => e.preventDefault[]];
- Tiếp theo, thêm những điều sau:
1Dòng này tạo ra yêu cầu mở phiên bảnlet myName = localStorage.getItem["name"]; myName;
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.// Stop the form from submitting when a button is pressed form.addEventListener["submit", [e] => e.preventDefault[]];
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ý
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.// Stop the form from submitting when a button is pressed form.addEventListener["submit", [e] => e.preventDefault[]];
- 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:
2Trình xử lý sự kiệnlet myName = localStorage.getItem["name"]; myName;
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// Stop the form from submitting when a button is pressed form.addEventListener["submit", [e] => e.preventDefault[]];
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// 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 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à// Stop the form from submitting when a button is pressed form.addEventListener["submit", [e] => e.preventDefault[]];
3, hiển thị dữ liệu trong cơ sở dữ liệu bên 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[]; }];
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// 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 được xác định sau nà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[]; }];
- 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:
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:// Stop the form from submitting when a button is pressed form.addEventListener["submit", [e] => e.preventDefault[]];
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ínhlet myName = localStorage.getItem["name"]; myName;
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 '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ên trong trình xử lý sự kiệ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[]; }];
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// 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 [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[]];
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// 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:// 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ú].// 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"; } }
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;
4Thê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";
}
}
3 chạy chức năng gọi là // 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 khi biểu mẫu được gửi [khi gửi // Stop the form from submitting when a button is pressed
form.addEventListener["submit", [e] => e.preventDefault[]];
2 được nhấn dẫn đến gửi biểu mẫu thành công]:let myName = localStorage.getItem["name"];
myName;
5Bâ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";
}
}
4. Thêm điều này bên dưới dòng trước của bạn:let myName = localStorage.getItem["name"];
myName;
6
Điều này khá phức tạp; Phá vỡ nó, chúng tôi:
- Chạy
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].// 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"; } }
- 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ị
8-như chúng tôi đã giải thích trước đó, điều này là tự động dân cư.// 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[]; }];
- Mở giao dịch
9 đối với cửa hàng đối tượ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"; } }
6 bằng phương thức// 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[]; }];
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.let myName = localStorage.getItem["name"]; myName;
- Truy cập lưu trữ đối tượng bằng phương thức
02, lưu kết quả trong biếnlet myName = localStorage.getItem["name"]; myName;
03.let myName = localStorage.getItem["name"]; myName;
- Thêm bản ghi mới vào cơ sở dữ liệu bằng
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.let myName = localStorage.getItem["name"]; myName;
- Thêm một loạt các trình xử lý sự kiện vào các đối tượng
9 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[]; }];
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ănglet myName = localStorage.getItem["name"]; myName;
3 để cập nhật hiển thị các ghi chú trên trang.// 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[]; }];
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[];
}];
3 hai lần trong mã của chúng tôi, vì vậy chúng tôi có thể xác định tốt hơn. Thêm điều này vào mã của bạn, bên dưới định nghĩa chức năng trước đó:let myName = localStorage.getItem["name"];
myName;
7Mộ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ử
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.// 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"];
- Tiếp theo, chúng tôi nhận được một tham chiếu đến cửa hàng đối tượng
6 bằng cách 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[]; }];
01 vàlet myName = localStorage.getItem["name"]; myName;
02 như chúng tôi đã làm tronglet myName = localStorage.getItem["name"]; myName;
4, ngoại trừ ở đây chúng tôi đang xích chúng lại với nhau theo một dò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"; } }
- Bước tiếp theo là sử dụng phương thức
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ệnlet myName = localStorage.getItem["name"]; myName;
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.// 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[]; }];
- Chúng tôi nhận được một tham chiếu đến chính con trỏ [một đối tượng
16] bằng cách sử dụnglet myName = localStorage.getItem["name"]; myName;
17.let myName = localStorage.getItem["name"]; myName;
- Tiếp theo, chúng tôi kiểm tra xem con trỏ có chứa bản ghi từ kho dữ liệu [
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ửlet myName = localStorage.getItem["name"]; myName;
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// 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"];
20 mà chúng tôi sẽ xem xét trong phần tiếp theo.let myName = localStorage.getItem["name"]; myName;
- Vào cuối khối
21, chúng tôi sử dụng phương thứclet 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ốilet 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.let myName = localStorage.getItem["name"]; myName;
- Khi không còn bản ghi nào để lặp lại,
25 sẽ trả vềlet myName = localStorage.getItem["name"]; myName;
26 và do đó, khốilet myName = localStorage.getItem["name"]; myName;
27 sẽ chạy thay vì khốilet myName = localStorage.getItem["name"]; myName;
21. Khối này kiểm tra xem có ghi chú nào được chèn vàolet myName = localStorage.getItem["name"]; myName;
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ữ.// 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"];
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;
20, trông như vậy:let myName = localStorage.getItem["name"];
myName;
8- 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
31 - nhớ lại rằng ID của bản ghi đã được lưu trong thuộc tínhlet myName = localStorage.getItem["name"]; myName;
32 trênlet 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ượnglet 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ố.let myName = localStorage.getItem["name"]; myName;
- 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
35 để xóa bản ghi khỏi cơ sở dữ liệu, chuyển ID.let myName = localStorage.getItem["name"]; myName;
- Khi giao dịch cơ sở dữ liệu hoàn tất, chúng tôi xóa
33 của DOM và một lần nữa kiểm tra xem liệulet myName = localStorage.getItem["name"]; myName;
9 có trống không, chèn một ghi chú khi thích hợ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"];
À 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;
38. Lần thứ hai bạn chạy nó, nó tìm thấy các video trong cơ sở dữ liệu và nhận chúng từ đó trước khi hiển thị chúng-điều này làm cho tải tiếp theo nhanh hơn và ít đói băng thông hơn.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.
- 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:
9let myName = localStorage.getItem["name"]; myName;
- Để 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
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ệulet 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ệulet myName = localStorage.getItem["name"]; myName;
41 có đánh giá thànhlet 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àmlet myName = localStorage.getItem["name"]; myName;
44 để đặt chúng vào UI. Nếu không, tên video được chuyển đến hàmlet myName = localStorage.getItem["name"]; myName;
45, bạn đã đoán nó, lấy video từ mạng.let myName = localStorage.getItem["name"]; myName;
0localStorage.removeItem["name"]; myName = localStorage.getItem["name"]; myName;
- Đoạn trích sau đây được lấy từ bên trong
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ầulet myName = localStorage.getItem["name"]; myName;
47 riêng biệt. Sau đó, chúng tôi sử dụng phương pháplet 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àmlet 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àmlet myName = localStorage.getItem["name"]; myName;
52 để lưu trữ các video đó trong cơ sở dữ liệu.let myName = localStorage.getItem["name"]; myName;
1localStorage.removeItem["name"]; myName = localStorage.getItem["name"]; myName;
- Chúng ta hãy nhìn vào
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ịchlet myName = localStorage.getItem["name"]; myName;
9 và nhận được tham chiếu đến cửa hàng đối tượ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"; } }
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ụnglet myName = localStorage.getItem["name"]; myName;
04.let myName = localStorage.getItem["name"]; myName;
2localStorage.removeItem["name"]; myName = localStorage.getItem["name"]; myName;
- Cuối cùng, chúng tôi có
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áplet 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ínhlet 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.let myName = localStorage.getItem["name"]; myName;
3localStorage.removeItem["name"]; myName = localStorage.getItem["name"]; myName;
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;
62 có sẵn trong đối tượng let myName = localStorage.getItem["name"];
myName;
63 không. Nếu điều này trả về đúng, thì chúng ta biết rằng ít nhất những điều cơ bản của nhân viên dịch vụ được hỗ trợ. Bên trong đây, chúng tôi sử dụng phương thức let myName = localStorage.getItem["name"];
myName;
64 để đăng ký một nhân viên dịch vụ có trong tệp let myName = localStorage.getItem["name"];
myName;
65 so với nguồn gốc mà nó nằm ở, để nó có thể kiểm soát các trang trong cùng thư mục với nó hoặc thư mục con. Khi lời hứa của nó đáp ứng, nhân viên dịch vụ được coi là đã đăng ký.localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;
4Lưu ý: Đường dẫn đã cho đến tệp
65 liên quan đến nguồn gốc trang web, không phải tệp JavaScript chứa mã. Nhân viên dịch vụ ở let myName = localStorage.getItem["name"];
myName;
67. Nguồn gốc là let myName = localStorage.getItem["name"];
myName;
68, và do đó đường dẫn đã cho là let myName = localStorage.getItem["name"];
myName;
69. Nếu bạn muốn lưu trữ ví dụ này trên máy chủ của riêng bạn, bạn sẽ phải thay đổi điều này cho phù hợp. Điều này khá khó hiểu, nhưng nó phải hoạt động theo cách này vì lý do bảo mật. The given path to the let myName = localStorage.getItem["name"];
myName;
let myName = localStorage.getItem["name"];
myName;
65 file is relative to the site origin, not the JavaScript file that contains the code. The service worker is at let myName = localStorage.getItem["name"];
myName;
67. The origin is let myName = localStorage.getItem["name"];
myName;
68, and therefore the given path has to be let myName = localStorage.getItem["name"];
myName;
69. If you wanted to host this example on your own server, you'd have to change this accordingly. This is rather confusing, but it has to work this
way for security reasons.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;
70 được bắn vào nhân viên dịch vụ; Bạn có thể viết mã bên trong chính nhân viên dịch vụ sẽ trả lời cài đặt.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;
71. Từ khóa let myName = localStorage.getItem["name"];
myName;
71 này là một cách để tham khảo phạm vi toàn cầu của nhân viên dịch vụ từ bên trong tệp nhân viên dịch vụ.Bên trong trình xử lý
let myName = localStorage.getItem["name"];
myName;
70, chúng tôi sử dụng phương thức let myName = localStorage.getItem["name"];
myName;
74, có sẵn trên đối tượng sự kiện, để báo hiệu rằng trình duyệt không nên hoàn thành việc cài đặt nhân viên dịch vụ cho đến khi lời hứa bên trong nó hoàn thành thành công.Đâ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;
75 để mở một đối tượng bộ đệm mới trong đó các phản hồi có thể được lưu trữ [tương tự như lưu trữ đối tượng IndexedDB]. Lời hứa này đáp ứng với một đối tượng localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;
7 đại diện cho bộ đệm let myName = localStorage.getItem["name"];
myName;
77. Sau đó, chúng tôi sử dụng phương thức let myName = localStorage.getItem["name"];
myName;
78 để tìm nạp một loạt tài sản và thêm phản hồi của họ vào bộ đệm.localStorage.removeItem["name"];
myName = localStorage.getItem["name"];
myName;
5Đó 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;
65 làm. Chúng tôi thêm một người nghe khác vào phạm vi toàn cầu của nhân viên dịch vụ, điều hành chức năng xử lý khi sự kiện let myName = localStorage.getItem["name"];
myName;
80 được nâng lên. Điều này xảy ra bất cứ khi nào trình duyệt đưa ra yêu cầu cho một tài sản trong thư mục mà nhân viên dịch vụ được đăng ký chống lại.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;
81.Bên trong khối này, chúng tôi sử dụng
let myName = localStorage.getItem["name"];
myName;
82 để kiểm tra xem có thể tìm thấy yêu cầu phù hợp hay không [nghĩa là khớp URL] có thể được tìm thấy trong bất kỳ bộ đệm nào không. Lời hứa này đáp ứng với phản hồi phù hợp nếu tìm thấy một trận đấu hoặc let myName = localStorage.getItem["name"];
myName;
26 nếu không.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;
6Và đó 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.