JavaScript và StorageManager
Bài viết này giải thích về JavaScript và StorageManager.
Chúng tôi sẽ giải thích chi tiết các tính năng của StorageManager, và giới thiệu cách sử dụng từng bước với những ví dụ mã nguồn thực tế chạy được trong trình duyệt.
YouTube Video
javascript-storage-manager.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 1em;
14 padding-bottom: 10em;
15 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16 background-color: #f7f9fc;
17 color: #333;
18 line-height: 1.6;
19 }
20
21 .container {
22 max-width: 800px;
23 margin: 0 auto;
24 padding: 1em;
25 background-color: #ffffff;
26 border: 1px solid #ccc;
27 border-radius: 10px;
28 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
29 }
30
31 .container-flex {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 2em;
35 max-width: 1000px;
36 margin: 0 auto;
37 padding: 1em;
38 background-color: #ffffff;
39 border: 1px solid #ccc;
40 border-radius: 10px;
41 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
42 }
43
44 .left-column, .right-column {
45 flex: 1 1 200px;
46 min-width: 200px;
47 }
48
49 h1, h2 {
50 font-size: 1.2rem;
51 color: #007bff;
52 margin-top: 0.5em;
53 margin-bottom: 0.5em;
54 border-left: 5px solid #007bff;
55 padding-left: 0.6em;
56 background-color: #e9f2ff;
57 }
58
59 button {
60 display: block;
61 margin: 1em auto;
62 padding: 0.75em 1.5em;
63 font-size: 1rem;
64 background-color: #007bff;
65 color: white;
66 border: none;
67 border-radius: 6px;
68 cursor: pointer;
69 transition: background-color 0.3s ease;
70 }
71
72 button:hover {
73 background-color: #0056b3;
74 }
75
76 #output {
77 margin-top: 1em;
78 background-color: #1e1e1e;
79 color: #0f0;
80 padding: 1em;
81 border-radius: 8px;
82 min-height: 200px;
83 font-family: Consolas, monospace;
84 font-size: 0.95rem;
85 overflow-y: auto;
86 white-space: pre-wrap;
87 }
88
89 .highlight {
90 outline: 3px solid #ffc107; /* yellow border */
91 background-color: #fff8e1; /* soft yellow background */
92 transition: background-color 0.3s ease, outline 0.3s ease;
93 }
94
95 .active {
96 background-color: #28a745; /* green background */
97 color: #fff;
98 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
99 transition: background-color 0.3s ease, box-shadow 0.3s ease;
100 }
101 </style>
102</head>
103<body>
104 <div class="container">
105 <h1>JavaScript Console</h1>
106 <button id="executeBtn">Execute</button>
107 <div id="output"></div>
108 </div>
109
110 <script>
111 // Override console.log to display messages in the #output element
112 (function () {
113 // Override console.log
114 const originalLog = console.log;
115 console.log = function (...args) {
116 originalLog.apply(console, args);
117 const message = document.createElement('div');
118 message.textContent = args
119 .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
120 .join(" ");
121 output.appendChild(message);
122 };
123
124 // Override console.error
125 const originalError = console.error;
126 console.error = function (...args) {
127 originalError.apply(console, args);
128 const message = document.createElement('div');
129 message.textContent = args
130 .map(arg => (typeof arg === "object" && arg !== null ? JSON.stringify(arg) : String(arg)))
131 .join(" ");
132 message.style.color = 'red'; // Color error messages red
133 output.appendChild(message);
134 };
135 })();
136
137 document.getElementById('executeBtn').addEventListener('click', () => {
138 // Prevent multiple loads
139 if (document.getElementById('externalScript')) return;
140
141 const script = document.createElement('script');
142 script.src = 'javascript-storage-manager.js';
143 script.id = 'externalScript';
144 //script.onload = () => console.log('javascript-storage-manager.js loaded and executed.');
145 //script.onerror = () => console.log('Failed to load javascript-storage-manager.js.');
146 document.body.appendChild(script);
147 });
148 </script>
149</body>
150</html>JavaScript và StorageManager
Các tính năng lưu trữ web như localStorage và IndexedDB trong trình duyệt rất quan trọng để lưu trạng thái và dữ liệu của ứng dụng cục bộ trên thiết bị của người dùng. Tuy nhiên, nếu không có đủ thông tin về quản lý dung lượng và tính bền vững của lưu trữ, việc mất dữ liệu ngoài ý muốn có thể xảy ra.
StorageManager là một API được các tác nhân người dùng (chủ yếu là trình duyệt) cung cấp, cho phép lấy và quản lý thông tin về việc sử dụng và tính bền vững của lưu trữ.
StorageManager là gì?
StorageManager là một đối tượng có thể truy cập qua navigator.storage, cung cấp các tính năng chính sau:.
- Lấy thông tin về dung lượng đã dùng và còn trống (
navigator.storage.estimate()) - Kiểm tra trạng thái bền vững của lưu trữ (
navigator.storage.persisted()) - Yêu cầu lưu trữ bền vững (
navigator.storage.persist())
Điều này đặc biệt hữu ích nếu bạn muốn đảm bảo lưu trữ bền vững trong Service Workers hoặc PWAs (Progressive Web Apps).
Kiểm tra khả năng hỗ trợ
Trước tiên, hãy kiểm tra xem trình duyệt có hỗ trợ StorageManager không.
1if ('storage' in navigator && 'estimate' in navigator.storage) {
2 console.log("StorageManager is supported.");
3} else {
4 console.warn("StorageManager is not supported in this browser.");
5}- Bạn có thể xác định khả năng hỗ trợ bằng cách kiểm tra xem đối tượng
navigator.storagecó tồn tại và chứa phương thứcestimatekhông.
Lấy thông tin sử dụng lưu trữ
Bằng cách sử dụng navigator.storage.estimate(), bạn có thể lấy được dung lượng lưu trữ ứng dụng đang sử dụng cũng như tổng hạn mức lưu trữ.
1async function showStorageUsage() {
2 if (!navigator.storage || !navigator.storage.estimate) {
3 console.warn("StorageManager is not supported.");
4 return;
5 }
6
7 const { usage, quota } = await navigator.storage.estimate();
8 console.log(`Used: ${(usage / 1024 / 1024).toFixed(2)} MB`);
9 console.log(`Total: ${(quota / 1024 / 1024).toFixed(2)} MB`);
10 console.log(`Usage percentage: ${(usage / quota * 100).toFixed(2)}%`);
11}
12
13showStorageUsage();usagelà lượng sử dụng hiện tại tính theo byte, vàquotalà dung lượng tối đa có thể dùng. Bạn có thể theo dõi mức sử dụng lưu trữ để thông báo cho người dùng nếu ứng dụng gần đạt giới hạn, hoặc dùng cho các mục đích khác.
Kiểm tra tính bền vững của lưu trữ
Trong nhiều trình duyệt, lưu trữ được lưu dưới dạng 'tạm thời', nghĩa là có thể bị xóa tự động nếu dung lượng ổ đĩa không đủ. Bằng cách sử dụng phương thức persisted(), bạn có thể kiểm tra xem lưu trữ hiện tại có bền vững hay không.
1async function checkPersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();Yêu cầu lưu trữ bền vững
Nếu chưa bền vững, bạn có thể yêu cầu tính bền vững từ trình duyệt bằng cách sử dụng persist(). Tuy nhiên, yêu cầu có thể bị từ chối tùy thuộc vào hành động rõ ràng của người dùng hoặc một số điều kiện nhất định.
1async function requestPersistence() {
2 const granted = await navigator.storage.persist();
3 console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();Trong nhiều trình duyệt, đáp ứng các điều kiện sau sẽ tăng khả năng được phê duyệt lưu trữ bền vững:.
- Ứng dụng được cài đặt dưới dạng PWA
- Người dùng thường xuyên sử dụng ứng dụng
- Ứng dụng chạy trong môi trường HTTPS
- Yêu cầu bền vững gắn liền với hành động rõ ràng của người dùng, như nhấp chuột
Ví dụ thực tiễn: Yêu cầu người dùng lưu trữ bền vững khi chưa được bật
1async function ensurePersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 if (isPersisted) {
4 console.log("Already using persistent storage.");
5 return;
6 }
7
8 const granted = await navigator.storage.persist();
9 if (granted) {
10 alert("Storage has been set to persistent.");
11 } else {
12 alert("Unable to set persistent storage. Your data may be deleted.");
13 }
14}
15
16document.querySelector("#persistButton").addEventListener("click", ensurePersistence);- Trong ví dụ này, yêu cầu lưu trữ bền vững được gửi khi người dùng nhấp vào nút. Việc sử dụng nút đảm bảo yêu cầu được gửi trong ngữ cảnh hành động của người dùng, tăng khả năng được chấp nhận.
Lưu ý và khả năng tương thích
navigator.storagechỉ khả dụng trong môi trường HTTPS.- Các trình duyệt lớn (Chrome, Edge, Firefox) đều hỗ trợ, nhưng một số tính năng bị giới hạn trên Safari.
quotaphụ thuộc vào điều kiện lưu trữ của thiết bị, và có thể khác nhau giữa các thiết bị ngay trên cùng một trang web.
Tóm tắt
Bằng cách sử dụng StorageManager, các ứng dụng web có thể khai thác lưu trữ cục bộ của người dùng một cách an toàn và chiến lược hơn. Nó chủ yếu cung cấp các tính năng sau:.
- Bạn có thể kiểm tra dung lượng lưu trữ bằng
estimate(). - Bạn có thể kiểm tra trạng thái bền vững bằng
persisted(). - Bạn có thể yêu cầu bền vững thông qua
persist().
Khi phát triển PWA hoặc các ứng dụng ưu tiên offline, việc sử dụng StorageManager giúp bạn vừa nâng cao trải nghiệm người dùng, vừa tăng cường bảo vệ dữ liệu.
Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.