在HTML中解释存储对象

最新推荐文章于 2023-03-26 23:41:33 发布

new个大佬带我飞

最新推荐文章于 2023-03-26 23:41:33 发布

阅读量229

点赞数

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/w1725034682/article/details/128763176

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

因此，我们已经了解了存储对象在HTML 5中的有用性。现在，我们将了解HTML中的两种不同类型的存储对象。

有两种类型的存储对象

本地存储
会话存储

本地存储无限期存储数据，而会话存储存储当前会话期间的数据。

存储在本地存储中的数据可以由同一来源的任何窗口或选项卡访问，而存储在会话存储中的数据只能在创建它的窗口或选项卡中访问。HTML5存储对象比cookie提供更多的数据安全性，因为它们不会在客户端和服务器之间传输数据。

HTML 5中的本地存储

本地存储将数据存储在浏览器中，没有到期日期，这意味着我们存储在本地存储中的任何数据永远不会过期。

本地存储是一个静态对象。因此，我们可以通过将窗口对象作为参考或直接使用localStorage关键字来访问它。由于本地存储是一个对象，它将数据存储在键值对中。

用户可以按照以下语法存储和从本地存储中获取数据。

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

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

在上述语法中，我们使用getItem()和setItem()方法来获取数据并将其设置为本地存储。

参数

密钥-它是将数据存储在Web存储中的唯一密钥。
值-它是一个与唯一密钥相关的值，用于将数据存储在Web存储中。

示例：
在本例中，我们使用localStorage对象的setItem()方法在Web浏览器中存储key1和key2的不同值。之后，我们通过将密钥传递为参数，使用getItem()方法访问值。

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

示例：
在下面的示例中，我们为同一键设置了两个值。在输出中，用户可以看到Web存储可以包含唯一的密钥，如果我们为现有密钥设置新值，它将取代该值。

当用户单击“从本地存储获取数据”按钮时，它会显示最终设置的“网站”密钥的本地存储值。

<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中的会话存储

会话存储与本地存储非常相似，但存储特定会话的数据。如果会话终止，会话存储中的数据会自动清除，但永远不会从本地存储中删除。

此外，要将数据存储在会话存储中，我们可以使用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和sssageStorage对象的方法

localStorage和ssendStorage对象还包含getItem（）和setItem（）等其他方法来执行各种操作。我们已经解释了以下方法。

clear() – 它用于清除网络存储。
key(ind) – 它以基于零的索引为参数，并从ind索引返回密钥。
length-它返回存储在Web存储中的键值对总数。
removeItem(key) – 它以键为参数，并从Web存储中删除该键值对。

结论

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

new个大佬带我飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
在HTML中解释存储对象

正如网络存储词所代表的那样，它将数据存储在用户的浏览器中。在HTML 5之前，开发人员使用cookie在本地存储数据，但cookie允许存储有限数量的数据，例如以千字节为单位。本地存储允许用户存储高达5 MB的数据。开发人员使用cookie将数据存储在浏览器中，并在客户端和服务器之间进行交换。当我们将数据存储在cookie中时，它会在特定时间后过期。但是，我们可以设置数据的过期，但它仍然会在很长一段时间后过期。
复制链接

扫一扫