جافاسكريبت وStorageManager
تشرح هذه المقالة جافاسكريبت وStorageManager۔
سنوضح ميزات StorageManager بالتفصيل، ونقدم كيفية استخدامه خطوة بخطوة مع أمثلة برمجية تعمل فعليًا في المتصفح۔
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>جافاسكريبت وStorageManager
ميزات التخزين على الويب مثل localStorage و IndexedDB في المتصفحات ضرورية لحفظ حالة وبيانات التطبيقات محليًا على جهاز المستخدم۔ لكن إذا كانت المعلومات حول إدارة سعة التخزين والاستمرارية غير كافية، فقد يحدث فقدان غير متوقع للبيانات۔
StorageManager هي واجهة برمجة تطبيقات (API) تقدمها وكلاء المستخدم (أساسًا المتصفحات) لتوفير طرق للحصول على وإدارة معلومات حول الاستخدام والاستمرارية الخاصة بالتخزين۔
ما هو StorageManager؟
StorageManager هو كائن يمكن الوصول إليه عبر navigator.storage، ويوفر الميزات الأساسية التالية:۔
- استرجاع معلومات حول التخزين المستخدم والمتاح (
navigator.storage.estimate()) - التحقق من حالة استمرارية التخزين (
navigator.storage.persisted()) - طلب استمرارية التخزين (
navigator.storage.persist())
هذا مفيد بشكل خاص إذا كنت ترغب في ضمان استمرارية التخزين في Service Workers أو تطبيقات الويب التقدمية (PWAs)۔
التحقق من التوفر
أولاً، تحقق مما إذا كان المتصفح يدعم 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}- يمكنك تحديد الدعم من خلال التحقق مما إذا كان الكائن
navigator.storageموجودًا ويحتوي على دالةestimate۔
استرجاع استخدام التخزين
باستخدام navigator.storage.estimate()، يمكنك الحصول على كمية التخزين التي يستخدمها تطبيقك بالإضافة إلى الحصة الإجمالية للتخزين۔
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();usageيمثل مقدار الاستخدام الحالي بالبايت، وquotaهي السعة القصوى المتوفرة۔ يمكنك مراقبة استخدام التخزين لتنبيه المستخدم إذا اقترب تطبيقك من حد التخزين، بالإضافة لاستخدامات أخرى۔
التحقق من استمرارية التخزين
في العديد من المتصفحات، يُحفظ التخزين كـ 'مؤقت'، ما يعني أنه قد يتم حذفه تلقائيًا إذا أصبحت مساحة القرص غير كافية۔ باستخدام دالة persisted()، يمكنك التحقق مما إذا كان التخزين الحالي دائمًا۔
1async function checkPersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();طلب استمرارية التخزين
إذا لم يكن التخزين بالفعل دائمًا، يمكنك طلب الاستمرارية من المتصفح باستخدام persist()۔ ومع ذلك، قد يتم رفض هذا الطلب حسب إجراءات المستخدم أو شروط معينة۔
1async function requestPersistence() {
2 const granted = await navigator.storage.persist();
3 console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();في كثير من المتصفحات، من شأن استيفاء الشروط التالية زيادة احتمال الحصول على موافقة الاستمرارية:۔
- يتم تثبيت التطبيق كتطبيق ويب تقدمي (PWA)
- يستخدم المستخدم التطبيق بشكل متكرر
- يعمل التطبيق في بيئة HTTPS
- يكون طلب الاستمرارية مرتبطًا بإجراء صريح من المستخدم، مثل النقر
مثال عملي: طلب الاستمرارية من المستخدم عند عدم وجودها
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);- في هذا المثال، يُطلب الاستمرارية عندما ينقر المستخدم على زر۔ استخدام الزر يجعل الطلب ضمن سياق إجراء المستخدم، مما يزيد من احتمال قبوله۔
التحذيرات والتوافق
navigator.storageمتاح فقط في بيئات HTTPS۔- تدعمه المتصفحات الرئيسية (Chrome وEdge وFirefox)، لكن بعض الميزات محدودة في Safari۔
quotaتعتمد على ظروف تخزين الجهاز، وقد تكون قيمتها مختلفة لأجهزة مختلفة على نفس الموقع۔
الملخص
باستخدام StorageManager، يمكن لتطبيقات الويب استخدام التخزين المحلي للمستخدم بشكل أكثر أمانًا واستراتيجية۔ يوفر بشكل أساسي الميزات التالية:۔
- يمكنك التحقق من استخدام التخزين عبر
estimate()۔ - يمكنك التحقق من حالة الاستمرارية عبر
persisted()۔ - يمكنك طلب الاستمرارية عبر
persist()۔
عند تطوير تطبيقات ويب تقدمية (PWAs) أو تطبيقات تعتمد على العمل دون اتصال، يتيح استخدام StorageManager تحسين تجربة المستخدم وحماية البيانات بشكل أفضل۔
يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔