JavaScript at StorageManager
Ipinaliwanag ng artikulong ito ang JavaScript at StorageManager.
Ipapaliwanag namin nang detalyado ang mga tampok ng StorageManager, at ipakikilala kung paano ito gamitin nang hakbang-hakbang gamit ang mga halimbawa ng code na talagang gumagana sa browser.
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 at StorageManager
Ang mga tampok ng web storage tulad ng localStorage at IndexedDB sa mga browser ay mahalaga para sa pag-save ng estado at data ng mga aplikasyon nang lokal sa device ng gumagamit. Gayunpaman, kung kulang ang impormasyon tungkol sa pamamahala ng kapasidad ng storage at pagpapatuloy, maaaring maganap ang hindi inaasahang pagkawala ng data.
Ang StorageManager ay isang API na ibinibigay ng mga user agent (pangunahing mga browser) na nag-aalok ng mga paraan upang makuha at pamahalaan ang impormasyon ukol sa paggamit at pagpapatuloy ng storage.
Ano ang StorageManager?
Ang StorageManager ay isang object na naa-access sa pamamagitan ng navigator.storage, na nagbibigay ng mga sumusunod na pangunahing tampok:.
- Kunin ang impormasyon tungkol sa nagamit at available na storage (
navigator.storage.estimate()) - Suriin ang persistence status ng storage (
navigator.storage.persisted()) - Humiling ng persistence ng storage (
navigator.storage.persist())
Ito ay partikular na kapaki-pakinabang kung gusto mong matiyak ang persistent storage sa Service Workers o PWAs (Progressive Web Apps).
Pag-check ng Availability
Una, suriin kung sinusuportahan ng browser ang 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}- Maaari mong malaman ang suporta sa pamamagitan ng pagsuri kung umiiral ang object na
navigator.storageat mayroong method naestimate.
Pagkuha ng Paggamit ng Storage
Sa pamamagitan ng paggamit ng navigator.storage.estimate(), maaari mong malaman ang dami ng storage na ginagamit ng iyong app pati na rin ang kabuuang quota ng storage.
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();- Ang
usageay kumakatawan sa kasalukuyang nagagamit sa bytes, at angquotaay ang pinakamataas na puwedeng gamitin na kapasidad. Maaari mong bantayan ang paggamit ng storage upang abisuhan ang user kung malapit na sa storage limit ang iyong app, bukod pa sa ibang gamit.
Pag-check ng Storage Persistence
Sa maraming browser, ang storage ay nailalagay bilang 'temporary', ibig sabihin ay maaaring awtomatikong mabura ito kapag kinulang ang disk space. Sa pamamagitan ng paggamit ng method na persisted(), maaari mong suriin kung persistent ang kasalukuyang storage.
1async function checkPersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();Paghingi ng Storage Persistence
Kung hindi pa ito persistent, maaari kang humiling ng persistence mula sa browser gamit ang persist(). Gayunpaman, maaari itong tanggihan depende sa malinaw na aksyon ng user o ibang mga kondisyon.
1async function requestPersistence() {
2 const granted = await navigator.storage.persist();
3 console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();Sa maraming browser, ang pagsunod sa mga sumusunod na kondisyon ay nagpapataas ng tsansang maaprubahan ang persistence:.
- Ang app ay naka-install bilang isang PWA
- Madalas gamitin ng user ang app
- Ang app ay tumatakbo sa isang HTTPS na kapaligiran
- Ang persistence request ay naka-ugnay sa isang malinaw na aksyon ng user, tulad ng pag-click
Praktikal na Halimbawa: Paghingi ng Persistence mula sa User kapag Hindi Persistent
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);- Sa halimbawang ito, hihilingin ang persistence kapag nag-click ang user ng button. Ang paggamit ng button ay ginagawa ang request sa loob ng konteksto ng aksyon ng user, kaya mas malamang na maaprubahan ito.
Mga Paalala at Compatibility
- Ang
navigator.storageay magagamit lamang sa HTTPS na mga kapaligiran. - Ang mga pangunahing browser (Chrome, Edge, Firefox) ay sumusuporta nito, ngunit ang ilang mga tampok ay limitado sa Safari.
- Ang
quotaay nakadepende sa storage conditions ng device, at maaaring magkaiba ang halaga nito sa iba't ibang device para sa parehong site.
Buod
Sa pamamagitan ng paggamit ng StorageManager, magagamit ng web applications ang local storage ng user nang mas ligtas at estratehiko. Pangunahing nagbibigay ito ng mga sumusunod na tampok:.
- Maaari mong suriin ang pag-gamit ng storage gamit ang
estimate(). - Maaari mong suriin ang persistence status gamit ang
persisted(). - Maaari kang humiling ng persistence gamit ang
persist().
Kapag nagde-develop ng PWAs o offline-first na apps, nagbibigay-daan ang paggamit ng StorageManager para mapabuti ang karanasan ng user at mas maprotektahan ang data.
Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.