解释一下HTML中的存储对象

解释一下HTML中的存储对象

正如网络存储一词所代表的那样,它将数据存储在用户的浏览器内部的本地。在HTML 5之前,开发者使用cookie在本地存储数据,但cookie允许存储的数据量有限,例如以千字节为单位。而本地存储允许用户存储高达5MB的数据。

开发人员使用cookies在浏览器中存储数据,并在客户端和服务器之间交换数据。当我们将数据存储在cookie中时,它在一个特定的时间后过期。然而,我们可以设置数据的过期时间,但它仍然在很长时间后过期。使用存储对象存储在网络存储器中的任何数据都不会过期,这可能是在HTML 5中引入存储对象的一个原因。

此外,HTML 5网络存储比cookies提供更多的数据安全。在服务器之间传输数据时,黑客可以攻击数据,并可以从cookies中窃取数据,但网络存储不允许传输数据。因此,它比cookie更安全。

因此,我们已经了解了存储对象在HTML 5中是如何发挥作用的。现在,我们将了解HTML中两种不同类型的存储对象。

有两种类型的存储对象 –

  • 本地存储

  • 和会话存储。

本地存储 “无限期地存储数据,而 “会话存储 “则在当前会话期间存储数据。

存储在本地存储中的数据可以被同一产地的任何窗口或标签访问,而存储在会话存储中的数据只能在创建它的窗口或标签中访问。HTML5存储对象比cookies提供更多的数据安全,因为它们不会在客户端和服务器之间传输数据。

HTML 5中的本地存储

localstorage在浏览器中存储的数据没有过期日期,这意味着无论我们在localstorage里面存储什么数据都不会过期。

本地存储 “是一个静态对象。因此,我们可以通过把窗口对象作为一个引用或者直接使用localStorage关键字来访问它。由于localstorage是一个对象,它以键-值对的形式存储数据。

语法

用户可以按照下面的语法来存储和获取本地存储的数据。

// to get data from localstorage using the key
localStorage.getItem("key");

// to set data in the localstorage
localStorage.setItem("key", value);

在上述语法中,我们使用了getItem()setItem()方法来获取和设置本地存储的数据。

参数

  • 密钥 – 它是一个独特的密钥,用于在网络存储中存储数据。

  • 值 – 它是一个与唯一键相关的值,用于在网络存储中存储数据。

示例

在这个例子中,我们使用了localStorage对象的setItem()方法来存储网络浏览器中key1和key2的不同值。之后,我们使用getItem()方法,通过传递key作为参数来访问这些值。

<html>
<body>
   <h2>Using the <i> localStorage </i> Object</h2>
   <div id = "output"> </div>
   <script>      
      // setting up multiple values for a single key
      localStorage.setItem("key1", "JavaScript!");
      localStorage.setItem("key2", "TypeScript!");
      document.getElementById("output").innerHTML += "The value stored for key1 in localstorage is " + localStorage.getItem("key1") + "<br/>";
      document.getElementById("output").innerHTML += "The value stored for key2 in localstorage is " + localStorage.getItem("key2") + "<br/>";
   </script>
</body>
</html>

示例

在下面的例子中,我们为同一个键设置了两个值。在输出中,用户可以观察到网络存储可以包含唯一的键,如果我们为已经存在的键设置新的值,它就会替换掉这个值。

当用户点击 “从本地存储获取数据 “按钮时,它显示的是最后设置的 “网站 “键的本地存储的值。

<html>
<body>
   <h2>Using the <i> localStorage </i> object</h2>
   <button onclick = "getData()"> Get data from local storage </button><br><br>
   <div id = "output"> </div>
   <script>      
      // setting up multiple values for a single key
      localStorage.setItem("website", "website Name");
      localStorage.setItem("website", "TutorialsPoint!");

      // function to get data.
      function getData() {

         // using the getItem() method of the local storage object to get the data.
         document.getElementById("output").innerHTML +="The data from the localstorage is " + localStorage.getItem("website");
      }
   </script>
</body>
</html>

HTML 5中的会话存储

会话存储与本地存储非常相似,但存储的是一个特定会话的数据。如果会话终止,session存储中的数据会自动清除,但绝不会从本地存储中删除。

另外,为了在会话存储中存储数据,我们可以使用setItem()方法,把sessionStorage作为一个引用,就像localStorage一样,并使用getItem()来从会话存储中获取数据。

语法

用户可以按照下面的语法来存储和获取会话存储中的数据。

// to get data from sessionStorage using the key
sessionStorage.getItem("key");

// to set data in the sessionStorage
sessionStorage.setItem("key", value);

示例

下面的例子与上面的例子几乎一样。我们使用会话存储而不是localStorage来存储数据。当会话超时时,浏览器会删除会话存储中的所有数据。

<html>
<body>
   <h2>Using the <i> sessionStorage </i> Object</h2>
   <div id = "output"> </div>
   <script>      
      // using the sessionStorage object to store the id for a particular session
      sessionStorage.setItem("id", "ShubhamVora564");

      // fetching the id from the session storage.
      document.getElementById("output").innerHTML +=  "My id fetched from the session storage is " + sessionStorage.getItem("id") +  "<br/>";
   </script>
</body>
</html>

localStorage和sessionStorage对象的方法

localStorage和sessionStorage对象还包含其他方法,如getItem()和setItem()来执行各种操作。我们在下面解释了这些方法。

  • clear() – 它用于清除网络存储。

  • key(ind) – 它接收基于零的索引作为参数,并返回来自ind索引的键。

  • length – 它返回存储在网络存储中的键值对的总数。

  • removeItem(key) – 它以一个键为参数,从网络存储中删除该键值对。

结论

HTML存储对象是一种在用户的浏览器中本地存储数据的方式。有两种类型的存储对象。本地存储 “和 “会话存储”。本地存储可以无限期地存储数据,而会话存储则是在当前会话期间存储数据。HTML5存储对象比cookies提供更多的数据安全,因为它们不会在客户端和服务器之间传输数据。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程