数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学HTML中的存储对象详解
正如web存储这个词所代表的，它将数据存储在用户的浏览器本地。在HTML 5之前，开发者使用cookie来本地存储数据，但是cookie只允许存储有限量的数据，例如几KB。而本地存储允许用户存储高达5 MB的数据。
开发者使用cookie在浏览器中存储数据并在客户端和服务器之间交换数据。当我们将数据存储在cookie中时，它会在特定时间后过期。然而，我们可以设置数据的过期时间，但它仍然会在很长时间后过期。使用存储对象在web存储中存储的任何数据都不会过期，这可能是HTML 5引入存储对象的一个原因。
此外，HTML 5 web存储比cookie提供了更高的数据安全性。在服务器之间传输数据时，黑客可能会攻击数据并从cookie中窃取数据，但web存储永远不允许数据传输。因此，它比cookie更安全。
因此，我们学习了存储对象在HTML 5中的用途。现在，我们将学习HTML中两种不同类型的存储对象。
有两种类型的存储对象：
本地存储
和会话存储。
本地存储无限期存储数据，而会话存储在当前会话期间存储数据。
存储在本地存储中的数据可以被相同来源的任何窗口或标签访问，而存储在会话存储中的数据只能被创建它的窗口或标签访问。HTML5存储对象比cookie提供了更高的数据安全性，因为它们不会在客户端和服务器之间传输数据。
HTML 5中的本地存储
localStorage在浏览器中存储数据，没有过期日期，这意味着我们在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()方法来获取和设置本地存储的数据。
参数
键 - 它是用于在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存储可以包含唯一键，如果我们为已经存在的键设置新值，它将替换该值。
当用户点击“从本地存储获取数据”按钮时，它将显示本地存储中“website”键的值，这是最后设置的值。
<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中的会话存储
sessionStorage与本地存储非常相似，但它只为特定会话存储数据。如果会话终止，sessionStorage中的数据将自动清除，但不会从本地存储中删除。
此外，要将数据存储到会话存储中，我们可以像localStorage一样使用setItem()方法，以sessionStorage为参考，并使用getItem()从会话存储中获取数据。
语法
用户可以按照以下语法在会话存储中存储和获取数据。
// to get data from sessionStorage using the key
sessionStorage.getItem("key");
// to set data in the sessionStorage
sessionStorage.setItem("key", value);
示例
下面的例子与上面的例子几乎相同。我们使用sessionStorage来存储数据而不是localStorage。当会话超时时，浏览器会删除sessionStorage中的所有数据。
<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() – 用于清除web存储。
key(ind) – 它以基于零的索引作为参数，并返回ind索引处的键。
length – 它返回web存储中存储的键值对的总数。
removeItem(key) – 它以键作为参数，并从web存储中删除该键值对。
结论
HTML存储对象是一种在用户浏览器中本地存储数据的方法。有两种类型的存储对象：本地存储和会话存储。本地存储无限期存储数据，而会话存储在当前会话期间存储数据。HTML5存储对象比cookie提供了更高的数据安全性，因为它们不会在客户端和服务器之间传输数据。
浏览量：266
