資料結構
網路
關係資料庫管理系統 (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+ 次瀏覽
