Skip to content
Related Articles

Related Articles

HTML | DOM Storage length Property
  • Last Updated : 26 Jul, 2019

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.




<!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




<!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
  • Internet Explorer 8.0
  • Firefox 3.5
  • Opera 10.5
  • Safari 4.0
My Personal Notes arrow_drop_up
Recommended Articles
Page :