数据结构
网络
关系型数据库管理系统
操作系统
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+ 次浏览
