資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學HTML中的儲存物件詳解
正如web儲存這個詞所代表的，它將資料儲存在使用者的瀏覽器本地。在HTML 5之前，開發者使用cookie來本地儲存資料，但是cookie只允許儲存有限量的資料，例如幾KB。而本地儲存允許使用者儲存高達5 MB的資料。
開發者使用cookie在瀏覽器中儲存資料並在客戶端和伺服器之間交換資料。當我們將資料儲存在cookie中時，它會在特定時間後過期。然而，我們可以設定資料的過期時間，但它仍然會在很長時間後過期。使用儲存物件在web儲存中儲存的任何資料都不會過期，這可能是HTML 5引入儲存物件的一個原因。
此外，HTML 5 web儲存比cookie提供了更高的資料安全性。在伺服器之間傳輸資料時，駭客可能會攻擊資料並從cookie中竊取資料，但web儲存永遠不允許資料傳輸。因此，它比cookie更安全。
因此，我們學習了儲存物件在HTML 5中的用途。現在，我們將學習HTML中兩種不同型別的儲存物件。
有兩種型別的儲存物件：
本地儲存
和會話儲存。
本地儲存無限期儲存資料，而會話儲存在當前會話期間儲存資料。
儲存在本地儲存中的資料可以被相同來源的任何視窗或標籤訪問，而儲存在會話儲存中的資料只能被建立它的視窗或標籤訪問。HTML5儲存物件比cookie提供了更高的資料安全性，因為它們不會在客戶端和伺服器之間傳輸資料。
HTML 5中的本地儲存
localStorage在瀏覽器中儲存資料，沒有過期日期，這意味著我們在localStorage中儲存的任何資料都不會過期。
localStorage是一個靜態物件。因此，我們可以透過將視窗物件作為引用來訪問它，或者直接使用localStorage關鍵字。由於localStorage是一個物件，它以鍵值對的形式儲存資料。
語法
使用者可以按照以下語法在本地儲存中儲存和獲取資料。
// to get data from localstorage using the key
localStorage.getItem("key");
// to set data in the localstorage
localStorage.setItem("key", value);
在上面的語法中，我們使用了getItem()和setItem()方法來獲取和設定本地儲存的資料。
引數
鍵 - 它是用於在web儲存中儲存資料的唯一鍵。
值 - 它是與唯一鍵相關的值，用於在web儲存中儲存資料。
示例
在這個例子中，我們使用了localStorage物件的setItem()方法來為web瀏覽器中的key1和key2儲存不同的值。之後，我們透過傳遞鍵作為引數，使用getItem()方法訪問這些值。
<html>
<body>
<h2>Using the <i> localStorage </i> Object</h2>
<div id = "output"> </div>
<script>
// setting up multiple values for a single key
localStorage.setItem("key1", "JavaScript!");
localStorage.setItem("key2", "TypeScript!");
document.getElementById("output").innerHTML += "The value stored for key1 in localstorage is " + localStorage.getItem("key1") + "<br/>";
document.getElementById("output").innerHTML += "The value stored for key2 in localstorage is " + localStorage.getItem("key2") + "<br/>";
</script>
</body>
</html>
示例
在下面的例子中，我們為同一個鍵設定了兩個值。在輸出中，使用者可以觀察到web儲存可以包含唯一鍵，如果我們為已經存在的鍵設定新值，它將替換該值。
當用戶點選“從本地儲存獲取資料”按鈕時，它將顯示本地儲存中“website”鍵的值，這是最後設定的值。
<html>
<body>
<h2>Using the <i> localStorage </i> object</h2>
<button onclick = "getData()"> Get data from local storage </button><br><br>
<div id = "output"> </div>
<script>
// setting up multiple values for a single key
localStorage.setItem("website", "website Name");
localStorage.setItem("website", "TutorialsPoint!");
// function to get data.
function getData() {
// using the getItem() method of the local storage object to get the data.
document.getElementById("output").innerHTML +="The data from the localstorage is " + localStorage.getItem("website");
}
</script>
</body>
</html>
HTML 5中的會話儲存
sessionStorage與本地儲存非常相似，但它只為特定會話儲存資料。如果會話終止，sessionStorage中的資料將自動清除，但不會從本地儲存中刪除。
此外，要將資料儲存到會話儲存中，我們可以像localStorage一樣使用setItem()方法，以sessionStorage為參考，並使用getItem()從會話儲存中獲取資料。
語法
使用者可以按照以下語法在會話儲存中儲存和獲取資料。
// to get data from sessionStorage using the key
sessionStorage.getItem("key");
// to set data in the sessionStorage
sessionStorage.setItem("key", value);
示例
下面的例子與上面的例子幾乎相同。我們使用sessionStorage來儲存資料而不是localStorage。當會話超時時，瀏覽器會刪除sessionStorage中的所有資料。
<html>
<body>
<h2>Using the <i> sessionStorage </i> Object</h2>
<div id = "output"> </div>
<script>
// using the sessionStorage object to store the id for a particular session
sessionStorage.setItem("id", "ShubhamVora564");
// fetching the id from the session storage.
document.getElementById("output").innerHTML += "My id fetched from the session storage is " + sessionStorage.getItem("id") + "<br/>";
</script>
</body>
</html>
localStorage和sessionStorage物件的方法
localStorage和sessionStorage物件還包含其他方法，例如getItem()和setItem()，用於執行各種操作。我們將在下面解釋這些方法。
clear() – 用於清除web儲存。
key(ind) – 它以基於零的索引作為引數，並返回ind索引處的鍵。
length – 它返回web儲存中儲存的鍵值對的總數。
removeItem(key) – 它以鍵作為引數，並從web儲存中刪除該鍵值對。
結論
HTML儲存物件是一種在使用者瀏覽器中本地儲存資料的方法。有兩種型別的儲存物件：本地儲存和會話儲存。本地儲存無限期儲存資料，而會話儲存在當前會話期間儲存資料。HTML5儲存物件比cookie提供了更高的資料安全性，因為它們不會在客戶端和伺服器之間傳輸資料。
瀏覽量：266
