Рубрики

HTML | Свойство длины хранения DOM

Свойство « Длина хранилища» в HTML DOM используется для возврата количества элементов, хранящихся в объекте хранилища . Объект Storage включает в себя localStorage или sessionStorage .

Синтаксис:
Получить свойство длины хранилища.

object.length

Возвращаемое значение: Возвращает число , указывающее количество элементов в настоящее время в объекте хранения.

Пример 1: использование объекта localStorage.

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

Вывод: после добавления 50 элементов и нажатия кнопки.

Пример 2: Использование объекта sessionStorage

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

Вывод: после добавления 10 элементов и нажатия кнопки.

Поддерживаемые браузеры: браузер, поддерживаемый свойством Storage length , перечислены ниже:

  • Google Chrome 4.0
  • Internet Explorer 8.0
  • Firefox 3.5
  • Опера 10,5
  • Safari 4.0

Рекомендуемые посты:

HTML | Свойство длины хранения DOM

0.00 (0%) 0 votes