解释 HTML 中的存储对象
正如 Web 存储一词所代表的那样，它将数据存储在用户的浏览器中。在 HTML 5 之前，开发人员使用 cookie 在本地存储数据，但 cookie 允许存储有限量的数据，例如以千字节为单位。本地存储允许用户存储最多 5 MB 的数据。
开发人员使用 cookie 将数据存储在浏览器中并在客户端和服务器之间交换数据。当我们将数据存储在 cookie 中时，它会在特定时间后过期。但是，我们可以设置数据的到期时间，但它仍然会在很长时间后过期。使用存储对象存储在 Web 存储中的任何数据都不会过期，这可能是在 HTML 5 中引入存储对象的一个原因。
此外，HTML 5 Web 存储比 cookie 提供更多的数据安全性。在服务器之间传输数据时，黑客可以攻击数据并从 cookie 中窃取数据，但 Web 存储绝不允许传输数据。因此，它比 cookie 更安全。
因此，我们了解了存储对象在 HTML 5 中的用途。现在，我们将了解 HTML 中的两种不同类型的存储对象。
存储对象有两种类型 -
本地存储
和 会话 存储。
本地存储无限期地存储数据，而 会话 存储则在当前会话期间存储数据。
存储在 本地存储 中的数据可由同一来源的任何窗口或选项卡访问，而存储在 会话存储 中的数据只能在创建它的窗口或选项卡中访问。 HTML5 存储对象提供的数据安全性比 cookie 高，因为它们不会在客户端和服务器之间传输数据。
HTML 5 中的本地存储
localstorage 将数据存储在浏览器中，没有到期日期，这意味着我们存储在 localstorage 中的任何数据都不会过期。
localstorage 是一个静态对象。因此，我们可以通过将 window 对象作为引用或直接使用 localStorage 关键字来访问它。由于 localstorage 是一个对象，它将数据存储在键值对中。
语法
用户可以按照以下语法存储和从本地存储获取数据。
// 使用键从 localstorage 获取数据
localStorage.getItem("key");
// 在 localstorage 中设置数据
localStorage.setItem("key", value);
在上述语法中，我们使用了 getItem() 和 setItem() 方法获取和设置 localstorage 中的数据。
参数
Key − 它是在 Web 存储中存储数据的唯一键。
Value − 它是与在 Web 存储中存储数据的唯一键相关的值。
示例
在此示例中，我们使用 localStorage 对象的 setItem() 方法在 Web 浏览器中存储 key1 和 key2 的不同值。之后，我们通过将键作为参数传递，使用 getItem() 方法访问这些值。
<html>
<body>
<h2>Using the <i> localStorage </i> Object</h2>
<div id = "output"> </div>
<script>
// 为单个键设置多个值
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>
// 为单个键设置多个值
localStorage.setItem("website", "website Name");
localStorage.setItem("website", "TutorialsPoint!");
// 函数来获取数据。
function getData() {
// 使用本地存储对象的 getItem() 方法获取数据。
document.getElementById("output").innerHTML +="The data from the localstorage is " + localStorage.getItem("website");
}
</script>
</body>
</html>
HTML 5 中的会话存储
session 存储与本地存储非常相似，但存储的是特定会话的数据。如果会话终止，session 存储中的数据将自动清除，但不会从本地存储中删除。
此外，要将数据存储在会话存储中，我们可以使用 setItem() 方法，以 sessionStorage 为参考，就像 localStorage 一样，并使用 getItem() 从会话存储中获取数据。
语法
用户可以按照以下语法存储和从会话存储中获取数据。
// 使用键从 sessionStorage 获取数据
sessionStorage.getItem("key");
// 在 sessionStorage 中设置数据
sessionStorage.setItem("key", value);
示例
下面的示例与上面的示例几乎相同。我们使用会话存储来存储数据，而不是使用 localStorage。当会话超时时，浏览器会从会话存储中删除所有数据。
<html>
<body>
<h2>Using the <i> sessionStorage </i> Object</h2>
<div id = "output"> </div>
<script>
// 使用 sessionStorage 对象存储特定会话的 id
sessionStorage.setItem("id", "ShubhamVora564");
// 从会话存储中获取 id。
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 提供更多的数据安全性，因为它们不会在客户端和服务器之间传输数据。
