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.

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

HTML | DOM Storage length Property

Explore