JavaScript ve StorageManager
Bu makale, JavaScript ve StorageManager'ı açıklar.
StorageManager'ın özelliklerini ayrıntılı olarak açıklayacak ve tarayıcıda gerçekten çalışan kod örnekleriyle adım adım nasıl kullanılacağını göstereceğiz.
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 ve StorageManager
Tarayıcılardaki localStorage ve IndexedDB gibi web depolama özellikleri, uygulamaların durumunu ve verilerini kullanıcının cihazında yerel olarak kaydetmek için gereklidir. Ancak, depolama kapasitesi yönetimi ve kalıcılığı hakkında bilgi yetersizse, beklenmeyen veri kayıpları meydana gelebilir.
StorageManager, kullanıcı ajanları (çoğunlukla tarayıcılar) tarafından sağlanan ve depolamanın kullanımı ve kalıcılığı ile ilgili bilgi edinme ve yönetme imkânı sunan bir API'dir.
StorageManager nedir?
StorageManager, navigator.storage üzerinden erişilebilen bir nesnedir ve şu ana özellikleri sağlar:.
- Kullanılan ve mevcut depolama hakkında bilgi al (
navigator.storage.estimate()) - Depolama kalıcılık durumunu kontrol et (
navigator.storage.persisted()) - Depolama kalıcılığı talep et (
navigator.storage.persist())
Bu, özellikle Service Worker veya PWA (Progressive Web Apps)'de kalıcı depolama sağlamak istiyorsanız çok faydalıdır.
Kullanılabilirliği Kontrol Etme
Öncelikle, tarayıcının StorageManagerı destekleyip desteklemediğini kontrol edin.
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.storagenesnesinin mevcut olup olmadığını veestimatemetodunu içerip içermediğini kontrol ederek destek durumunu öğrenebilirsiniz.
Depolama Kullanımını Öğrenme
navigator.storage.estimate() kullanarak, uygulamanızın kullandığı depolama alanını ve toplam depolama kotasını öğrenebilirsiniz.
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();usagemevcut kullanım miktarını bayt cinsinden gösterir,quotaise azami kullanılabilir kapasitedir. Depolama kullanımı sınırına yaklaşırsa kullanıcıyı bilgilendirmek gibi amaçlarla depolama kullanımını izleyebilirsiniz.
Depolama Kalıcılığını Kontrol Etme
Birçok tarayıcıda, depolama 'geçici' olarak kaydedilir; yani disk alanı yetersiz kaldığında otomatik olarak silinebilir. persisted() metodunu kullanarak mevcut depolamanın kalıcı olup olmadığını kontrol edebilirsiniz.
1async function checkPersistence() {
2 const isPersisted = await navigator.storage.persisted();
3 console.log(`Persistent storage: ${isPersisted ? "Yes" : "No"}`);
4}
5
6checkPersistence();Depolama Kalıcılığı Talep Etme
Eğer zaten kalıcı değilse, tarayıcıdan persist() ile kalıcılık talep edebilirsiniz. Ancak, bu istek, açık kullanıcı eylemleri veya belirli koşullara bağlı olarak reddedilebilir.
1async function requestPersistence() {
2 const granted = await navigator.storage.persist();
3 console.log(`Persistence request ${granted ? "granted" : "denied"}`);
4}
5
6requestPersistence();Birçok tarayıcıda, aşağıdaki koşulların karşılanması kalıcılık onayını alma olasılığını artırır:.
- Uygulama PWA olarak yüklendi
- Kullanıcı uygulamayı sıkça kullanıyor
- Uygulama HTTPS ortamında çalışıyor
- Kalıcılık talebi, bir tıklama gibi açık bir kullanıcı eylemine bağlı
Pratik Örnek: Kalıcı Olmadığında Kullanıcıdan Kalıcılık Talep Etme
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);- Bu örnekte, kullanıcı bir düğmeye tıkladığında kalıcılık talep edilir. Bir düğmenin kullanılması, isteğin bir kullanıcı eylemi kapsamında yapılmasını sağlar ve onay alma ihtimalini artırır.
Dikkat Edilecekler ve Uyumluluk
navigator.storagesadece HTTPS ortamlarında kullanılabilir.- Büyük tarayıcılar (Chrome, Edge, Firefox) bunu destekler, ancak Safari'de bazı özellikler sınırlıdır.
quota, cihazın depolama şartlarına bağlıdır ve aynı site için farklı cihazlarda farklı değerler alabilir.
Özet
StorageManager kullanarak, web uygulamaları kullanıcının yerel depolamasını daha güvenli ve stratejik bir şekilde kullanabilir. Başlıca şu özellikleri sağlar:.
estimate()ile depolama kullanımını kontrol edebilirsiniz.persisted()ile kalıcılık durumunu kontrol edebilirsiniz.persist()ile kalıcılık talep edebilirsiniz.
PWA veya offline-first uygulamalar geliştirirken StorageManager kullanmak, hem gelişmiş kullanıcı deneyimi hem de daha iyi veri koruması sağlayacaktır.
Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.