Skip to content
Related Articles

Related Articles

HTML | DOM Storage length Property

View Discussion
Improve Article
Save Article
  • Last Updated : 04 Aug, 2022

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. 

localstorage 

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. 

sessionStorage 

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!