資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
Microsoft Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學HTML5 中不同型別的儲存
Web 應用可以使用 Web 儲存在使用者的瀏覽器中本地儲存資料。在 HTML5 之前，應用程式資料必須儲存在 Cookie 中，並隨每個伺服器請求一起傳送。使用 Web 儲存，可以安全地將大量資料本地儲存，而不會降低網站的功能。
與 Cookie 相比，Web 儲存不會向伺服器傳輸資訊，並且儲存容量要大得多（至少 5MB）。Web 儲存是按來源（按域名和協議）進行的。來自同一來源的所有頁面都可以儲存和訪問相同的資料。HTML Web 儲存提供兩個物件用於在客戶端儲存資料。
Window.localStorage − 儲存的資料沒有過期時間。
Window.sessionStorage − 資料將儲存在特定會話期間。
讓我們深入瞭解文章，逐一學習 HTML 中的儲存方式。
HTML localStorage
localStorage 物件用於永久儲存整個網站的資料。
localStorage.setItem(key, value)用於儲存與鍵關聯的資料。localStorage.getItem(key)用於檢索與鍵關聯的資料。
示例
在下面的示例中，我們使用 localStorage 在 Web 中儲存資料，且資料不會過期。
<!DOCTYPE html>
<html>
<body style="height:100px;">
<input id="name" type="name" placeholder="enter your name" />
<button type="submit" onClick="handleClick()">Click</button>
<br />
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof Storage !== "undefined") {
let name = document.getElementById("name").value;
localStorage.setItem("name", name);
document.getElementById("Varma").innerHTML = "Welcome To Tutorialspoint" + " " + localStorage.name;
} else {
alert("Sorry! your browser doesn't support Web Storage");
}
}
</script>
</body>
</html>
執行上述程式碼後，輸出視窗將彈出，在網頁上顯示輸入欄位和點選按鈕。當用戶在輸入欄位中輸入文字並點選按鈕時，文字將儲存在 localStorage 中。
HTML sessionStorage
sessionStorage 物件的功能與 localStorage 類似，區別在於它只儲存一個會話的資料，或者直到使用者關閉該視窗或標籤頁。
示例
sessionStorage 物件的功能與 localStorage 類似，區別在於它只儲存一個會話的資料，或者直到使用者關閉該視窗或標籤頁。
<!DOCTYPE html>
<html>
<body style="height:100px;">
<input id="name" type="name" placeholder="enter your name">
<button type="submit" onClick="handleClick()">Click</button>
<br>
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof(Storage) !== "undefined") {
let name = document.getElementById("name").value;
sessionStorage.setItem("name", name);
document.getElementById("Varma").innerHTML = ("Welcome To tutorialspoint" + " " + sessionStorage.name);
} else {
alert("Sorry! your browser is not supporting the browser")
}
}
</script>
</body>
</html>
執行上述指令碼後，它將生成顯示輸入欄位和點選按鈕的輸出。當用戶在輸入欄位中輸入內容後點擊按鈕時，資料將儲存在 sessionStorage 中，並在特定會話結束後被清除。
瀏覽量：58
