JavaScript dan StorageManager
Artikel ini menerangkan tentang JavaScript dan StorageManager.
Kami akan menerangkan ciri-ciri StorageManager secara terperinci, dan memperkenalkan cara menggunakannya langkah demi langkah dengan contoh kod yang berfungsi secara nyata di pelayar.
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 dan StorageManager
Ciri storan web seperti localStorage dan IndexedDB dalam pelayar adalah penting untuk menyimpan keadaan dan data aplikasi secara setempat pada peranti pengguna. Walau bagaimanapun, jika maklumat tentang pengurusan kapasiti dan ketahanan storan tidak mencukupi, kehilangan data yang tidak dijangka mungkin berlaku.
StorageManager adalah API yang disediakan oleh ejen pengguna (terutamanya pelayar) yang menawarkan kaedah untuk mendapatkan dan mengurus maklumat tentang penggunaan dan ketahanan storan.
Apa itu StorageManager?
StorageManager ialah objek yang boleh diakses melalui navigator.storage, yang menyediakan ciri utama berikut:.
- Mengambil maklumat tentang storan yang digunakan dan tersedia (
navigator.storage.estimate()) - Semak status ketahanan storan (
navigator.storage.persisted()) - Memohon ketahanan storan (
navigator.storage.persist())
Ini sangat berguna jika anda ingin memastikan storan kekal dalam Service Workers atau PWA (Progressive Web Apps).
Menyemak Ketersediaan
Pertama sekali, semak sama ada pelayar menyokong StorageManager.
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}- Anda boleh menentukan sokongan dengan memeriksa jika objek
navigator.storagewujud dan mempunyai kaedahestimate.
Memperolehi Penggunaan Storan
Dengan menggunakan navigator.storage.estimate(), anda boleh mendapatkan storan yang digunakan oleh aplikasi anda dan juga jumlah kuota storan.
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();usagemewakili penggunaan semasa dalam bait, danquotaialah kapasiti maksimum yang tersedia. Anda boleh memantau penggunaan storan untuk memaklumkan pengguna jika aplikasi anda hampir mencapai had storan, dan juga untuk kegunaan lain.
Memeriksa Ketahanan Storan
Dalam kebanyakan pelayar, storan disimpan sebagai 'sementara', yang bermaksud ia mungkin akan dipadam secara automatik jika ruang cakera tidak mencukupi. Dengan menggunakan kaedah persisted(), anda boleh menyemak sama ada storan semasa adalah kekal.
1async function checkPersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();Memohon Ketahanan Storan
Jika ia belum kekal, anda boleh memohon ketahanan dari pelayar dengan menggunakan persist(). Walau bagaimanapun, ia mungkin ditolak bergantung kepada tindakan eksplisit pengguna atau syarat tertentu.
1async function requestPersistence() {
2 const granted = await navigator.storage.persist();
3 console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();Dalam kebanyakan pelayar, memenuhi syarat berikut meningkatkan kemungkinan untuk mendapatkan kelulusan ketahanan:.
- Aplikasi dipasang sebagai PWA
- Pengguna kerap menggunakan aplikasi tersebut
- Aplikasi dijalankan dalam persekitaran HTTPS
- Permohonan ketahanan dikaitkan dengan tindakan eksplisit pengguna, seperti klik
Contoh Praktikal: Memohon Ketahanan daripada Pengguna Apabila Belum Kekal
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);- Dalam contoh ini, ketahanan diminta apabila pengguna menekan butang. Menggunakan butang menjadikan permohonan dibuat dalam konteks tindakan pengguna, menjadikannya lebih berkemungkinan untuk diluluskan.
Peringatan dan Keserasian
navigator.storagehanya tersedia dalam persekitaran HTTPS.- Pelayar utama (Chrome, Edge, Firefox) menyokongnya, tetapi beberapa ciri adalah terhad dalam Safari.
quotabergantung kepada keadaan storan peranti, dan mungkin berbeza pada setiap peranti walaupun untuk laman web yang sama.
Ringkasan
Dengan menggunakan StorageManager, aplikasi web boleh menggunakan storan setempat pengguna dengan lebih selamat dan strategik. Ia terutamanya menyediakan ciri-ciri berikut:.
- Anda boleh memeriksa penggunaan storan dengan
estimate(). - Anda boleh memeriksa status ketahanan dengan
persisted(). - Anda boleh memohon ketahanan dengan
persist().
Apabila membangunkan PWA atau aplikasi diutamakan luar talian, penggunaan StorageManager membolehkan anda mencapai kedua-dua peningkatan pengalaman pengguna dan perlindungan data yang lebih baik.
Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.