数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
Microsoft Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学HTML5 中不同类型的存储
Web 应用可以使用 Web 存储在用户的浏览器中本地存储数据。在 HTML5 之前，应用程序数据必须保存在 Cookie 中，并随每个服务器请求一起发送。使用 Web 存储，可以安全地将大量数据本地保存，而不会降低网站的功能。
与 Cookie 相比，Web 存储不会向服务器传输信息，并且存储容量要大得多（至少 5MB）。Web 存储是按来源（按域名和协议）进行的。来自同一来源的所有页面都可以存储和访问相同的数据。HTML Web 存储提供两个对象用于在客户端存储数据。
Window.localStorage − 存储的数据没有过期时间。
Window.sessionStorage − 数据将存储在特定会话期间。
让我们深入了解文章，逐一学习 HTML 中的存储方式。
HTML localStorage
localStorage 对象用于永久存储整个网站的数据。
localStorage.setItem(key, value)用于存储与键关联的数据。localStorage.getItem(key)用于检索与键关联的数据。
示例
在下面的示例中，我们使用 localStorage 在 Web 中存储数据，且数据不会过期。
<!DOCTYPE html>
<html>
<body style="height:100px;">
<input id="name" type="name" placeholder="enter your name" />
<button type="submit" onClick="handleClick()">Click</button>
<br />
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof Storage !== "undefined") {
let name = document.getElementById("name").value;
localStorage.setItem("name", name);
document.getElementById("Varma").innerHTML = "Welcome To Tutorialspoint" + " " + localStorage.name;
} else {
alert("Sorry! your browser doesn't support Web Storage");
}
}
</script>
</body>
</html>
运行上述代码后，输出窗口将弹出，在网页上显示输入字段和点击按钮。当用户在输入字段中输入文本并点击按钮时，文本将存储在 localStorage 中。
HTML sessionStorage
sessionStorage 对象的功能与 localStorage 类似，区别在于它只保存一个会话的数据，或者直到用户关闭该窗口或标签页。
示例
sessionStorage 对象的功能与 localStorage 类似，区别在于它只保存一个会话的数据，或者直到用户关闭该窗口或标签页。
<!DOCTYPE html>
<html>
<body style="height:100px;">
<input id="name" type="name" placeholder="enter your name">
<button type="submit" onClick="handleClick()">Click</button>
<br>
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof(Storage) !== "undefined") {
let name = document.getElementById("name").value;
sessionStorage.setItem("name", name);
document.getElementById("Varma").innerHTML = ("Welcome To tutorialspoint" + " " + sessionStorage.name);
} else {
alert("Sorry! your browser is not supporting the browser")
}
}
</script>
</body>
</html>
执行上述脚本后，它将生成显示输入字段和点击按钮的输出。当用户在输入字段中输入内容后点击按钮时，数据将存储在 sessionStorage 中，并在特定会话结束后被清除。
浏览量：58
