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