Объясните объект хранилища в HTML

Опубликовано: 14 Августа, 2022

Объект хранилища HTML в основном используется для локального хранения данных в веб-браузере на стороне клиента. Это безопасный и простой способ хранения больших объемов данных в веб-браузере. Он использует пары ключ-значение для хранения данных в веб-браузере.

Объект хранилища HTML может хранить данные в веб-браузере двумя способами:

местное хранилище
сеансХранилище

Объект локального хранилища: объект локального хранилища хранит данные с использованием объекта localStorage . Данные, хранящиеся в веб-браузере с помощью localStorage, останутся в хранилище браузера, даже если вы снова закроете или откроете браузер. Срок действия данных не истечет автоматически. Объект localStorage использует localStorage.getItem() для получения сохраненных данных и localStorage.setItem() для добавления данных в браузер.

Синтаксис:

Синтаксис для получения уже сохраненных данных из браузера с помощью localStorage.getItem(): требуется строковый параметр в качестве ключа для возврата значения, соответствующего этому конкретному ключу.
```
 localStorage.getItem("ключ");
```
Синтаксис для хранения данных в веб-браузере с использованием localStorage.setItem(): для хранения данных требуется два параметра, один из которых считается ключом , а другой — значением .
```
 localStorage.setItem("ключ", "значение");
```

Пример:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
</head>
  
<body>
    <div style="display: flex; 
                flex-direction: column; 
                align-items: center; 
                justify-content: center;">
  
        <h2>Welcome To GFG</h2>
  
        <input type="text" id="inputName" 
            placeholder="Enter Your Name">
        <br>
        <input type="text" id="inputCountry" 
            placeholder="Your Country">
        <br>
  
        <button onClick="addData()">
            Add Data
        </button>
          
        <p id="para"></p>
    </div>
  
    <script>
        function addData() {
            if (typeof (Storage) !== "undefined") {
  
                var name = document.getElementById(
                        "inputName").value;
                  
                var country = document.getElementById(
                        "inputCountry").value;
                          
                localStorage.setItem("Name", name);
  
                localStorage.setItem("Country", country);
  
                var para = document.getElementById(
                    "para").innerHTML = "Hey " 
                    + localStorage.getItem("Name") + "!" + 
                    "<br>" + "Welcome To India, You are from "
                    + localStorage.getItem("Country") + ".";
            }
            else {
                var para = document.getElementById(
                    "para").innerHTML ="Error! You browser "
                    + "doesn"t support HTML storage object";
            }
        }
    </script>
</body>
  
</html>

Выход:

Вот сохраненные данные в локальном хранилище веб-браузера:

Объект хранилища сеансов: Хранилище сеансов использует объект sessionStorage для хранения данных в веб-браузере. Данные, хранящиеся с использованием этого объекта, сохраняются только в течение сеанса, т.е. если мы закроем браузер, сохраненные данные также будут автоматически удалены одновременно. Он также использует тот же синтаксис, что и localStorage для хранения данных.

Синтаксис:

Синтаксис добавления данных:

 sessionStorage.setItem("ключ", "значение");

Синтаксис получения данных:
```
 sessionStorage.getItem("ключ");
```

Пример:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
</head>
  
<body>
    <div style="display: flex; 
                flex-direction: column; 
                align-items: center; 
                justify-content: center;">
  
        <h2>Welcome To GFG</h2>
  
        <input type="text" id="inputName" 
            placeholder="Enter Your Name">
        <br>
        <input type="text" id="inputCountry" 
            placeholder="Your Country">
        <br>
  
        <button onClick="addData()">
            Add Data
        </button>
          
        <p id="para"></p>
    </div>
  
    <script>
        function addData() {
            if (typeof (Storage) !== "undefined") {
  
                var name = document.getElementById(
                        "inputName").value;
  
                var country = document.getElementById(
                        "inputCountry").value;
  
                sessionStorage.setItem("Name", name);
  
                sessionStorage.setItem("Country", country);
  
                var para = document.getElementById(
                    "para").innerHTML = "Hey " 
                    + sessionStorage.getItem("Name")
                    + "!" + "<br>" + 
                    "Welcome To GeeksforGeeks! You belongs to "
                    + sessionStorage.getItem("Country") + ".";
            }
            else {
                var para = document.getElementById(
                    "para").innerHTML = "Error! You browser "
                    + "doesn"t support HTML storage object";
            }
        }
    </script>
</body>
  
</html>

Выход:

Вот сохраненные данные в sessionStorage веб-браузера:

JavaScript Picked HTML

Объясните объект хранилища в HTML

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ