HTML | DOM Storage length Property
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
Please Login to comment...