数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何使用 JavaScript 将 HTML 本地保存？
本教程将教我们如何使用 JavaScript 将 HTML 本地保存。
什么是本地存储？
本地存储是指将内容本地存储在您的 Web 浏览器中。这意味着它占用您计算机上的空间来存储内容，而不是将其存储在 Web 应用程序的服务器上。它是一种默认包含所有浏览器的 Web API。
本地存储通常存储应用程序数据、用户会话数据、身份验证令牌以及许多其他内容。在 HTML5 之前，开发人员使用 Cookie 来本地存储 HTML 内容，但现在每个浏览器都具有本地存储。
此外，Cookie 只允许本地存储最多4kb的数据，这远小于本地存储。大多数浏览器允许本地存储5MB的数据，是 Cookie 的 1250 倍。但是，每个浏览器本地存储数据的容量都不同。
在这里，我们解释了用户如何使用本地存储和会话存储来本地存储 HTML 内容。
使用 localStorage 对象
本地存储对象通过键值对将数据存储在用户的浏览器中。我们可以从 JavaScript 创建键值对并将它们存储在本地存储中。作为值，我们可以存储 HTML 内容，例如图像内容、行内 HTML 内容等等。
语法
用户可以按照以下语法使用本地存储对象将 HTML 内容本地存储。
localStorage.setItem ( key, value ); // method to set the content in local storage. let result = localStroage.getItem( key); // get content from local storage. localStorage.removeItem( key ): // To remove item from local storage. localStorage.clear( ); // to clear whole local storage.
参数
键 - 本地存储将键映射到其值。我们可以为键分配任何值，例如字符串。通过使用键，我们将从本地存储中获取项目。
值 - 它可以包含任何内容，例如我们想要存储在本地存储中的 HTML 内容或字符串值。
示例
以下示例演示了我们如何将项目存储在本地存储中并使用键从本地存储中获取项目。在这里，我们将行内 HTML 代码存储在本地存储中。
<!DOCTYPE html> <html> <head> <title> Example -Save HTML locally with JavaScript. </title> </head> <body> <h2> The localStorage Object. </h2> <p> The setItem() method saves data to local storage. </p> <div id="output"> </div> <script type="text/javascript"> let output = document.getElementById( "output" ); let key = "RowHTML"; let HTMLcontent = " <div style='color: red; font -size:20px;'>TutorialsPoint</div> "; // store content to local storage let x = localStorage.setItem(key, HTMLcontent); // get item from local storage let result = localStorage.getItem(key); output.innerHTML ="The saved HTML content: " + result; </script> </body> </html>
在上面的示例中，用户可以看到我们已将 div 元素存储在本地存储中。当我们从本地存储中获取 div 元素时，它会打印上述输出。
使用 sessionStorage 对象
会话存储几乎与本地存储相同，但是只要您关闭浏览器后再次打开它，会话存储中的数据就会刷新。因此，当您打开浏览器时，它会再次请求服务器获取数据。
语法
用户应遵循以下会话存储语法。
sessionStorage.setItem ( key, value ); let result = sessionStroage.getItem( key);
参数
键 - 它映射到值。
值 - 这是我们想要存储在会话存储中的内容。
示例
在这个例子中，我们将使用 sessionStorage 来存储样式表和图标。基本上，我们演示了使用 sessionStorage.setItem() 和 sessionStorage.getItem( ) 方法以及图像 HTML 内容。
<!DOCTYPE html>
<html >
<head>
<title> Example -Save HTML locally with JavaScript </title>
</head>
<body>
<h2> The sessionStorage Object </h2>
<p> Saving HTML content (Home Icon)to the session storage using the session.setItem() method. </p>
<div id="output"> </div>
<script type="text/javascript">
let output = document.getElementById("output");
// stylesheet for icon
let key = "styleSheet";
let styleSheetContet = '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">';
// store content to session storage
sessionStorage.setItem(key, styleSheetContet);
// appending style sheet for icon to head
let style = sessionStorage.getItem(key);
document.head.innerHTML += (style);
// store icon to session storage
sessionStorage.setItem("Icon", '<i class="fa fa-home"></i>')
let icon = sessionStorage.getItem("Icon");
// append icon to body
output.innerHTML = "The saved HTML content: " + icon;
</script>
</body>
</html>在上面的示例中，我们将样式表和图标的 HTML 代码存储在会话存储中。之后，我们使用 getItem() 方法从会话存储中访问它，并将样式表添加到 <head> 部分，并将图标添加到 body 部分。用户可以看到上面主页图标的输出。
结论
在本教程中，我们学习了两种将 HTML 本地保存的方法。一种是localStorage，另一种是sessionStorage。localStorage 不会删除数据，除非您手动删除它；sessionStorage 一旦您关闭浏览器，就会清除所有数据。这两个对象执行相同的工作，但它们保留数据的期限不同。
5K+ 次浏览
