資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 HTML5 localStorage 中儲存物件？
在本教程中，我們將討論如何在 HTML5 localStorage 中儲存物件。藉助介面視窗的 localStorage 屬性，我們可以訪問 Storage 物件並在其中儲存資料。
它沒有時間限制。因此，儲存在其中的資料將保留，直到被顯式刪除。關閉瀏覽器不會刪除 localStorage 資料。
為了在 localStorage 中儲存 JavaScript 物件，我們將研究如何將它們字串化並解析為 JSON 字串，然後如何將它們儲存在 localStorage 中。
使用 setItem() 方法
此 setItem() 方法用於在 HTML5 localStorage 中儲存資料。此方法位於視窗介面的 localStorage 屬性下。
語法
window.localStorage.setItem(key, value);
在這裡，我們在 setItem(key, value) 方法中使用了兩個引數。一個鍵和一個值。讓我們詳細瞭解這些引數。
引數
key − 這是值的唯一識別符號。稍後可以使用此唯一識別符號從 localStorage 獲取值。
value − 這是將儲存在 localStorage 中的資料/資訊。
示例 1
在這個例子中，首先，我們建立一個名為 objectRegion 的物件，我們將在 localStorage 中儲存它。之後，我們定義兩個變數：一個鍵和一個值。變數值包含物件的 JSON 格式。然後使用 setItem()，我們將此鍵值對設定為 localStorage。這裡我們還使用了 getItem() 方法，它將根據提供的鍵查詢值。它返回對應於鍵的值。然後我們顯示它。
<html>
<body>
<h2> Add an Object to localStorage in HTML5 using setItem() method </h2>
<label> Object: </label>
<div id="get-object"> </div>
<script>
// Creating object
// this object will be saved to localhost
const objectRegion = {
Region: "Asia",
Country: "India"
}
// defining key and value
const key = "object";
const value = JSON.stringify(objectRegion)
// setting the key-value pair to localhost
window.localStorage.setItem(key, value);
// Getting the key-value pair using the getItem() method with the key attribute
// getItem() method is used to get the value from localStorage using key
let object = window.localStorage.getItem(key);
// Displaying the object.
let element = document.getElementById("get-object");
element.innerHTML = object;
</script>
</body>
</html>
示例 2
在此示例中，我們可以在 localStorage 中儲存物件並檢索它。我們有兩個輸入文字框，透過它們我們可以將值儲存到 localStorage 中。並且使用鍵，我們可以檢索值。如果鍵不在 localStorage 中，getItem() 將返回 null 值。
<html>
<body>
<h2> Set the value to localStorage using setItem() method in an HTML5 </h2>
<p> Set the key-value pair to localStorage </p>
<label> Key: </label>
<input type="text" id="set-key">
<br> <br>
<label> Value: </label>
<input type="text" id="set-value">
<br> <br>
<input type="button" value="Set Key-Value" onclick="setKeyValue()">
<div id="set"> </div>
<p> Get the value from key </p>
<label> Enter Key: </label>
<input type="text" id="get-key">
<br> <br>
<div id="get-value"> </div>
<input type="button" value="Get Value" onclick="getValueFromKey()">
<div id="get"> </div>
<script>
// this function will Set Key-value pair to localStorage
function setKeyValue() {
// Getting the key-value pair from the input box
let key = document.getElementById("set-key").value;
let value = document.getElementById("set-value").value;
// Setting the key-value pair to localStorage
window.localStorage.setItem(key, JSON.stringify(value));
let text = "";
text += "<br>Key-Value set.<br> Try with key: ";
text += key;
text += " to get the value";
// Displaying the message
let element = document.getElementById("set");
element.innerHTML = text;
}
// This function will get value using the key from localStorage
function getValueFromKey() {
let key = document.getElementById("get-key").value;
// Getting the object value from localStorage with key using getItem() method
let value = window.localStorage.getItem(key);
let element = document.getElementById("get");
if (value != null) {
element.innerHTML = "<br> Value corresponding to key: " + key + " is: " + value;
} else {
element.innerHTML = "<br> Key is not in localStorage, try to set key-value pair first!";
}
}
</script>
</body>
</html>
在本教程中，我們瞭解瞭如何使用 setItem() 方法在 HTML5 的 localStorage 中儲存物件。
1K+ 次瀏覽
