JS властивість Storage.length
Загальний опис
length — це властивість об'єкта Storage (наприклад, localStorage або sessionStorage), яка повертає кількість елементів, що зберігаються у сховищі. Вона відображає загальну кількість записаних ключів у сховищі, що дозволяє дізнатися, скільки елементів було додано.
Коли ви додаєте елементи в сховище через методи, такі як setItem(), властивість length оновлюється відповідно до кількості доданих елементів. Наприклад, якщо ви додаєте два елементи у localStorage, властивість length буде дорівнювати 2.
localStorage.setItem("name", "Alice");
localStorage.setItem("age", "25");
console.log(localStorage.length); // Виведе: 2
У цьому прикладі до localStorage додаються два елементи: "name" і "age". Властивість length повертає значення 2, оскільки є два елементи у сховищі.
Властивість length є тільки для читання, тобто ви не можете змінити її безпосередньо. Вона автоматично оновлюється кожного разу, коли ви додаєте або видаляєте елементи через методи setItem(), removeItem() або clear().
- Порада
-
Ця властивість корисна для перевірки розміру сховища або підрахунку кількості елементів. Наприклад, якщо ви хочете пройти через всі елементи сховища, використовуючи
автор: Bondlength, ви можете отримати доступ до всіх індексів і здійснювати операції з усіма елементами. - Порада
-
Не забувайте, що властивість
автор: Bondlengthповертає кількість елементів у сховищі, а не кількість записаних значень. Це важливо, коли ви додаєте чи видаляєте елементи. Наприклад, якщо ви викликаєте методremoveItem(), кількість елементів у сховищі зменшиться, іlengthце відобразить. Однак, якщо елементи зберігаються з однаковими іменами (ключами), то викликlengthбуде не зовсім коректно відображати їх кількість. - Порада
-
Якщо ви зберігаєте важливі дані в сховищі і хочете перевірити їх наявність перед їх використанням, перевірка значення
автор: Bondlengthможе допомогти вам визначити, чи є елементи. Це важливо при роботі з динамічними даними або під час зберігання об'єктів.
Синтаксис
storage.lengthПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 4 | 3.5 | 4 | 10.5 | 12 | 8 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 6 | 3.2 |
| Переглядач |  |
|---|---|
| 1.10 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад демонструє роботу з властивістю length об'єкта localStorage. Користувач може додавати нові пари ключ-значення через форму, і при кожній зміні кількість елементів у сховищі оновлюється. Кнопка "Оновити кількість елементів" дозволяє вручну перевірити кількість елементів у сховищі без додавання нових. Використовуючи цю сторінку, користувач має наочне розуміння того, як працює властивість length для підрахунку елементів в localStorage.
HTML
<header>
<h2 class="title">Використання Storage -> length</h2>
<p class="description">Ця сторінка дозволяє додавати записи в localStorage і відображати кількість елементів у сховищі.</p>
</header>
<main>
<div class="result">
<form id="addItemForm">
<label for="itemKey">Ключ:</label>
<input type="text" id="itemKey" placeholder="Введіть ключ" required>
<label for="itemValue">Значення:</label>
<input type="text" id="itemValue" placeholder="Введіть значення" required>
<button type="submit">Додати в сховище</button>
</form>
<div>
<p>Кількість елементів у localStorage: <span id="storageCount">0</span></p>
<button id="updateCountBtn">Оновити кількість елементів</button>
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
form input {
margin: 5px;
padding: 10px;
width: 200px;
}
form button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
form button:hover {
background-color: #45a049;
}
#storageCount {
font-weight: bold;
}JS
// Отримуємо елементи DOM
const addItemForm = document.getElementById('addItemForm');
const storageCountElement = document.getElementById('storageCount');
const updateCountBtn = document.getElementById('updateCountBtn');
// Функція для оновлення кількості елементів у сховищі
function updateStorageCount() {
storageCountElement.textContent = localStorage.length;
}
// Оновлення кількості елементів при завантаженні сторінки
updateStorageCount();
// Обробник форми додавання елемента в localStorage
addItemForm.addEventListener('submit', function (event) {
event.preventDefault();
const key = document.getElementById('itemKey').value;
const value = document.getElementById('itemValue').value;
// Додаємо новий елемент в localStorage
localStorage.setItem(key, value);
// Очищаємо поля форми
document.getElementById('itemKey').value = '';
document.getElementById('itemValue').value = '';
// Оновлюємо кількість елементів
updateStorageCount();
});
// Оновлення кількості елементів при натисканні кнопки
updateCountBtn.addEventListener('click', updateStorageCount);
//# sourceURL=pen.jsЦей приклад перевіряє, чи є дані в localStorage. Якщо кількість елементів більша за нуль, виводиться повідомлення, що є дані. Це корисно для початкової перевірки перед завантаженням контенту на сторінці.
localStorage.setItem("user", JSON.stringify({name: "Alice", age: 30}));
localStorage.setItem("session", "active");
if(localStorage.length > 0) {
console.log("Маємо дані в сховищі");
}Цей код використовує length для перебору всіх елементів у localStorage і виведення їх ключів та значень. Це дозволяє вивести всі дані з сховища для подальшої обробки або відображення на сторінці.
for (let i = 0; i < localStorage.length; i++) {
let key = localStorage.key(i);
console.log(key + ": " + localStorage.getItem(key));
}Коментарі
Коментарів ще немає — будьте першим!