JavaScript וניהול אחסון (StorageManager)
מאמר זה מסביר על JavaScript וניהול אחסון (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>JavaScript וניהול אחסון (StorageManager)
אפשרויות אחסון בדפדפן כמו localStorage ו-IndexedDB חיוניות לשמירת מצב ונתונים של אפליקציות באופן מקומי במכשיר המשתמש. עם זאת, אם אין מידע מספק על ניהול קיבולת אחסון ומתמידות (Persistence), עלולה להתרחש אובדן נתונים לא צפוי.
StorageManager היא ממשק API שמספקים דפדפנים ומאפשרת קבלת מידע על שימוש ו-מתמידות של האחסון וניהולו.
מהו StorageManager?
StorageManager הוא אובייקט שנגיש דרך navigator.storage, והוא מספק את התכונות המרכזיות הבאות:.
- קבלת מידע על האחסון בשימוש והאחסון הזמין (
navigator.storage.estimate()) - בדיקת סטטוס מתמידות האחסון (
navigator.storage.persisted()) - בקשת מתמידות לאחסון (
navigator.storage.persist())
זה שימושי במיוחד כאשר רוצים להבטיח אחסון מתמיד עבור Service Workers או אפליקציות PWA (Progressive Web Apps).
בדיקת זמינות
ראשית, בדקו האם הדפדפן תומך ב-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(), ניתן לבדוק האם האחסון הנוכחי הוא מתמיד (persistent).
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().
בעת פיתוח אפליקציות PWA או אפליקציות שמיועדות לפעול גם ללא חיבור לרשת, שימוש ב-StorageManager מאפשר לשפר את חוויית המשתמש ולהגביר את ההגנה על הנתונים.
תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.