数据结构
网络
关系数据库管理系统 (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对象
localStorage对象通过键值对将数据存储在用户的浏览器中。我们可以使用JavaScript创建键值对并将它们存储在本地存储中。作为值，我们可以存储HTML内容，例如图像内容、行内HTML内容等等。
语法
用户可以按照以下语法使用localStorage对象将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.
参数
键 - localStorage将键映射到其值。我们可以为键分配任何值，例如字符串。通过使用键，我们将从本地存储中获取项目。
值 - 它可以包含任何内容，例如我们想要存储在本地存储中的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与localStorage几乎相同，但在关闭浏览器后再次打开时，sessionStorage中的数据会刷新。因此，当您打开浏览器时，它会再次向服务器请求数据。
语法
用户应遵循以下sessionStorage语法。
sessionStorage.setItem ( key, value ); let result = sessionStroage.getItem( key);
参数
键 - 它映射到值。
值 - 我们想要存储在sessionStorage中的内容。
示例
在这个例子中，我们将使用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代码存储在sessionStorage中。之后，我们使用getItem()方法从sessionStorage中访问它，并将样式表添加到<head>部分，并将图标添加到主体部分。用户可以看到上面家庭图标的输出。
结论
在本教程中，我们学习了两种将HTML本地保存的方法。一种是使用localStorage，另一种是使用sessionStorage。localStorage不会删除数据，除非您手动删除它；而sessionStorage会在您关闭浏览器后清除所有数据。这两个对象的功能相同，但数据存储时间的限制不同。
5000+ 次浏览
