4.1 localStorage və sessionStorage
Veb-anbarlar veb-tətbiqlərə istifadəçinin brauzerində məlumat saxlamağa imkan verir. Bu, səhifələr arasında naviqasiya zamanı və ya ziyarətlər arasında saxlanması lazım olan məlumatları saxlamaq üçün faydalıdır. HTML5-də iki əsas veb-anbar növü təqdim edilib: localStorage və sessionStorage.
localStorage nədir?
localStorage — bu, istifadəçinin brauzerində qeyri-müəyyən müddətə saxlanılan bir məlumat anbarıdır. localStorage-dəki məlumatlar brauzer bağlandıqdan və kompüter yenidən başladıqdan sonra da mövcud qalır. Bu, istifadəçi seçimləri və ya alış-veriş səbətinin məlumatları kimi sessiyalar arasında saxlanmalı olan məlumatların saxlanması üçün faydalıdır.
sessionStorage nədir?
sessionStorage — bu, istifadəçinin brauzerində yalnız bir sessiya ərzində saxlanılan bir məlumat anbarıdır. sessionStorage-dəki məlumatlar yalnız brauzer sekməsi və ya pəncərəsi açıq olduğu müddətdə mövcuddur. Bu, yalnız bir sessiya ərzində lazım olan, məsələn, müvəqqəti forma məlumatları və ya tətbiqin vəziyyəti kimi məlumatlar üçün faydalıdır.
Əsas metodlar və xüsusiyyətlər
localStorage və sessionStorage metodları və xüsusiyyətləri
Hər iki veb-anbar növü məlumatlarla işləmək üçün metodlarla və xüsusiyyətlərlə eyni API-ə malikdir:
setItem(key, value): göstərilən açarla dəyəri saxlayır.getItem(key): göstərilən açar altında saxlanılmış dəyəri qaytarır.removeItem(key): göstərilən açarla dəyəri silir.clear(): anbardakı bütün məlumatları təmizləyir.key(index): indekse görə açarı qaytarır.length: anbardakı açar-dəyər cütlərinin sayını qaytarır.
4.2 İstifadə Misalları
localStorage istifadə misalı:
<!DOCTYPE html>
<html>
<head>
<title>localStorage Misalı</title>
</head>
<body>
<h1>localStorage Misalı</h1>
<input type="text" id="username" placeholder="İstifadəçi adınızı daxil edin">
<button id="saveButton">Yadda saxla</button>
<button id="loadButton">Yüklə</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// localStorage-ə dəyəri yadda saxlayırıq
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('İstifadəçi adı yadda saxlanıldı!');
});
// localStorage-dən dəyəri yükləyirik
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('İstifadəçi adı yükləndi!\n' + `${savedUsername}`);
} else {
alert('İstifadəçi adı tapılmadı.');
}
});
</script>
</body>
</html>
sessionStorage istifadə misalı:
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Misalı</title>
</head>
<body>
<h1>sessionStorage Misalı</h1>
<input type="text" id="sessionData" placeholder="Bir məlumat daxil edin">
<button id="saveSessionButton">Yadda saxla</button>
<button id="loadSessionButton">Yüklə</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// sessionStorage-ə dəyəri yadda saxlayırıq
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Məlumat sessiyada yadda saxlanıldı!');
});
// sessionStorage-dən dəyəri yükləyirik
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Məlumat sessiyadan yükləndi!\n' + `${savedData}`);
} else {
alert('Sessiyada məlumat tapılmadı.');
}
});
</script>
</body>
</html>
4.3 localStorage və sessionStorage müqayisəsi
localStorage və sessionStorage fərqləri
- Saxlama vaxtı:
- localStorage məlumatları qeyri-müəyyən müddətə saxlayır, yalnız istifadəçi və ya skript onu açıq şəkildə silənə qədər.
- sessionStorage yalnız mövcud sessiyanın (tab və ya brauzer pəncərəsinin) vaxtı ərzində məlumatları saxlayır.
- Əhatə dairəsi:
- localStorage-də olan məlumatlar eyni domenin bütün tab və pəncərələrində əlçatandır.
- sessionStorage-də olan məlumatlar yalnız cari tab və ya pəncərədə əlçatandır.
- Saxlama həcmi:
- Adətən localStorage və sessionStorage bir domen üçün 5-10 MB ilə məhdudlaşır, bu brauzerə bağlıdır.
localStorage və sessionStorage istifadə nümunəsi:
<!DOCTYPE html>
<html>
<head>
<title>Müqayisə Nümunəsi</title>
</head>
<body>
<script>
// localStorage istifadəsi
localStorage.setItem('persistentData', 'Bu məlumat sessiyalar arası saxlanır');
console.log(localStorage.getItem('persistentData')); // "Bu məlumat sessiyalar arası saxlanır"
// sessionStorage istifadəsi
sessionStorage.setItem('temporaryData', 'Bu məlumat yalnız sessiya ərzində saxlanır');
console.log(sessionStorage.getItem('temporaryData')); // "Bu məlumat yalnız sessiya ərzində saxlanır"
</script>
</body>
</html>
4.4 Tətbiq Sahələri
localStorage nə vaxt istifadə olunmalıdır:
- İstifadəçi parametrləri və ya üstünlüklər kimi sessiyalar arasında saxlanmalı olan məlumatların saxlanması
- Eyni domenin bütün tabları və pəncərələrində əlçatan olan məlumatların saxlanması
- Nadir hallarda dəyişən məlumatların saxlanması
sessionStorage nə vaxt istifadə olunmalıdır:
- Yalnız cari sessiya müddətində lazım olan müvəqqəti məlumatların saxlanması
- Müəyyən bir brauzer tabı və ya pəncərəsi üçün spesifik olan məlumatların saxlanması
- Tab və ya pəncərə bağlandıqda silinməli olan məlumatların saxlanması
Təhlükəsizlik və məxfilik
Veb saxlayıcıdan istifadə edərkən təhlükəsizlik və məxfilik məsələlərini nəzərə almaq vacibdir:
- Şifrələmə: veb saxlayıcılardakı məlumatlar standart olaraq şifrələnmir. Məxfi məlumatları saxlamaq lazım olduqda, məlumatları saxlamazdan əvvəl onları şifrələmək tövsiyə olunur.
- Cross-domain hücumları: veb saxlamalar yalnız bir domen daxilində işləyir, bu da digər domenlərdən məlumatlara daxil olmağı əngəlləyir. Amma XSS hücumlarından (məxsusi sayt skripti) qorunmaq vacibdir, çünki pis niyyətlilər saxlanmış məlumatlara daxil ola bilər.
- Məlumatların həcminin məhdudlaşdırılması: yalnız lazım olan məlumatları saxlamağa çalışın və köhnəlmiş məlumatları müntəzəm olaraq təmizləyin ki, saxlayıcı dolmasın.
GO TO FULL VERSION