Open In App

HTML | DOM Storage length Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 04 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads