The Storage length property in HTML DOM is used to return the number of items stored in the Storage Object. The Storage object includes both localStorage or sessionStorage.
Syntax: To get the Storage length property.
object.length
Return Value: It returns a number indicating the number of items currently in the Storage object.
Example 1: Using on the localStorage object.
html
<!DOCTYPE html><html>
<head>
<title>DOM Storage length</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>DOM Storage length</b>
<p>Click on the buttons below to add/clear
items and check the current number
of items in localStorage
</p>
<p>Total Items: <span class="output"></span></p>
<button onclick="addItem(50)">
Add 50 items
</button>
<button onclick="clearItems()">
Clear all items
</button>
<button onclick="getStorageLength()">
Get Storage length
</button>
<div class="items"> </div>
<script>
// To set item.
function addItem(values) {
for (i = 0; i < values; i++)
localStorage.setItem(i, 'item ' + i);
}
// To clear item.
function clearItems() {
localStorage.clear();
}
// To return the number of items.
function getStorageLength() {
totalItems = localStorage.length;
document.querySelector('.output').textContent =
totalItems;
}
</script>
</body>
</html>
|
Output: After adding 50 elements and clicking the button.
Example 2: Using on the sessionStorage object
html
<!DOCTYPE html><html>
<head>
<title>DOM Storage length</title>
</head>
<body>
<h1 style="color: green">
GeeksForGeeks
</h1>
<b>DOM Storage length</b>
<p>
Click on the buttons below to add/clear
items and check the current number of
items in sessionStorage
</p>
<p>Total Items: <span class="output"></span></p>
<button onclick="addItem(10)">Add 10 items</button>
<button onclick="clearItems()">Clear all items</button>
<button onclick="getStorageLength()">
Get Storage length
</button>
<div class="items"> </div>
<script>
function addItem(values) {
for (i = 0; i < values; i++)
sessionStorage.setItem(i, 'item ' + i);
}
function clearItems() {
sessionStorage.clear();
}
function getStorageLength() {
totalItems = sessionStorage.length;
document.querySelector('.output').textContent =
totalItems;
}
</script>
</body>
</html>
|
Output: After adding 10 elements and clicking the button.
Supported Browsers: The browser supported by Storage length Property are listed below:
- Google Chrome 4.0
- Edge 12.0
- Internet Explorer 8.0
- Firefox 3.5
- Opera 10.5
- Safari 4.0