JavaScript 本地存储解释!
在互联网早期,你需要一台服务器来存储数据。但如今,通过 LocalStorage,你可以将数据存储在浏览器和应用程序上,而无需与后端服务器通信。
在本文中,您将了解 JavaScript 中 LocalStorage 的理论和实际应用。
让我们讨论一下网络存储
在深入探讨之前,我们先来了解一下 Web 存储的定义。Web 存储是 HTML5 的一大特色,它允许 Web 应用程序将数据本地存储在用户的浏览器中。
两种最常见的 Web 存储形式是 LocalStorage 和 Session Storage。这两种 Web 存储形式之间的主要区别在于,LocalStorage 中保存的数据LocalStorage
永远不会离开浏览器,并且会一直保留在那里,直到您明确删除它为止。相反,Session Storage 中保存的数据Session Storage
会在浏览器选项卡/窗口关闭后被删除。
什么是本地存储?
如前所述,LocalStorage 是浏览器提供的一种 Web 存储形式,它允许 Web 应用程序将数据本地存储在用户的浏览器中,并且没有到期日期。即使您关闭浏览器选项卡/窗口,存储的数据仍然可用。
请注意,LocalStorage 中存储的数据仅保留在用户访问网站时所用设备的浏览器中。因此,如果用户之后使用其他浏览器或其他设备再次访问同一网站,则无法访问已存储的数据。
LocalStorage 用例
下面介绍一些 LocalStorage 的日常使用案例。
1. 存储部分提交的表单数据
如果用户在线填写长表单,LocalStorage 可以成为存储用户输入的有用资源。这样,即使在填写表单和提交表单之间网络断开连接,用户也不会丢失输入,并且可以从上次中断的地方继续填写。
2.缓存
缓存是指将登录信息等数据存储在用户设备上,以便将来对这些数据的请求能够更快地得到处理。您可以使用 LocalStorage 缓存整个网站,以便用户即使离线也能访问网站。
3. 基础应用数据库
如前所述,数据存储最初只能通过后端与数据库通信来实现。但现在,有了 LocalStorage,您可以将数据存储在前端,而无需数据库。因此,LocalStorage 有时可以作为基本应用程序的“小型”数据库。
如何访问 LocalStorage
访问 LocalStorage 非常简单,只需几个步骤:
- 转到任何网站或网络应用程序,然后按F12键盘打开浏览器控制台。
- 接下来,点击应用程序选项卡,在左侧菜单中,您将在存储
LocalStorage
选项卡下看到如下所示的内容。
- 单击
LocalStorage
下拉菜单,然后单击下拉项。
可以看出,有两列,key
和value
。这是 LocalStorage 存储您保存的所有数据的地方。
如何使用本地存储
您可以使用以下方法来管理 LocalStorage 中的数据。
方法 | 描述 |
---|---|
setItem() |
将数据存储在 LocalStorage 中。 |
getItem() |
从 LocalStorage 获取或检索数据 |
removeItem() |
使用密钥从 LocalStorage 中删除数据 |
key() |
从 LocalStorage 中检索指定索引处的数据 |
设置项目()
此方法用于将数据存储在 LocalStorage 中。它接受一个键作为第一个参数,然后一个值作为第二个参数。
LocalStorage
让我们使用以下内容添加数据。
localStorage.setItem("name", "Mandy");
// Here, `name` is the key and `Mandy` is the value
前面提到过,LocalStorage是以字符串形式存储数据的,所以如果要保存对象、数组等数据,需要使用JSON.stringify()
方法将其转换为字符串。
让我们看看它是如何工作的!
//Storing objects in LocalStorage
const user = {
name: "Mandy",
age: 23,
};
localStorage.setItem("user-info", JSON.stringify(user));
//Storing arrays/lists in LocalStorage
const names = ["John", "Jake", "Vanessa"];
localStorage.setItem("names", JSON.stringify(names));
获取项目()
使用此getItem()
方法从 LocalStorage 中检索数据。此方法接受一个参数,用于key
保存数据。
例如,要检索上述user
对象的数据,您将使用以下语句:
localStorage.getItem("user-info");
上述代码将返回JSON
如下所示的字符串:
"{name:"Mandy", age:"23"}"
然后您应该使用该方法将其转换为对象JSON.parse()
。
JSON.parse(localStorage.getItem('user-info'));
删除项目()
使用该removeItem()
方法从 LocalStorage 中移除数据。此方法接受一个key
作为参数。
例如,您将使用以下语句user
从 LocalStorage 中删除对象。
localStorage.removeItem("user-info");
钥匙()
使用key(index)
方法从 LocalStorage 中检索数据,其中index
代表nth
要检索的数据。
localStorage.key(2);
清除()
使用该clear()
方法在特定实例中清除或删除 LocalStorage 中的所有数据。
localStorage.clear()
项目
现在您已经了解了用于管理 LocalStorage 中数据的主要方法,让我们开始创建一个 Web 应用程序,用户可以在其中执行以下操作:
- 将数据保存到 LocalStorage
- 检索数据
- 使用
key
- 并清除 LocalStorage 中的所有数据。
首先创建一个新文件夹并在代码编辑器中打开它。接下来,创建三个文件:index.html
、style.css
和main.js
。
让我们编码吧!
该index.html
文件将包含 Web 应用程序的 HTML 标记。HTML 代码包含一个表单,其中包含各种带有按钮的输入字段。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Local Storage</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="form">
<form id="userForm">
<h1>LocalStorage Application</h1>
<label for="userName">User</label>
<input
type="text"
id="userName"
placeholder="Enter user name"
required
autofocus
/><br />
<label for="age">Age</label>
<input
type="number"
id="age"
placeholder="Enter user age"
required
/><br />
<label for="key">Key</label>
<input type="text" id="key" placeholder="Enter key" required /><br />
<button type="submit">Save user</button>
</form>
<br />
<label for="key">Enter Key to retrieve user</label>
<input
type="text"
id="retrieveKey"
placeholder="Enter key to access user"
required
/><br />
<button id="retrieveButton">Retrieve user</button>
<br />
<div id="userData"></div>
<br />
<label for="removeKey">Enter Key to delete user</label>
<input
type="text"
id="removeKey"
placeholder="removeKey"
required
/><br />
<button id="removeButton">Delete user</button>
<br />
<button id="clearButton">Delete all users</button>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
这是 CSS 代码。
/* base styles */
html {
font-size: 67.5%;
}
body {
font-size: 1.6rem;
padding: 0;
margin: 0;
}
/* form */
#form {
margin-left: 2rem;
}
这是main.js
包含从 LocalStorage 存储、检索和删除数据的所有功能的文件。
//store user data in the localStorage
function store() {
var userName = document.getElementById("userName").value;
var age = document.getElementById("age").value;
var key = document.getElementById("key").value;
const user = {
userName,
age,
};
//convert user object to string and save it
localStorage.setItem(key, JSON.stringify(user));
}
//retrieve user data from localStorage
function retrieveUserData() {
let key = document.getElementById("retrieveKey").value;
console.log("retrive records");
let userData = localStorage.getItem(key); //searches for the key in localStorage
let paragraph = document.createElement("p");
let info = document.createTextNode(userData);
paragraph.appendChild(info);
let element = document.getElementById("userData");
element.appendChild(paragraph);
retrieveKey.value = "";
}
//delete user data from localStorage
function removeUserData() {
var removeKey = document.getElementById("removeKey").value;
localStorage.removeItem(removeKey);
removeKey.value = "";
}
//delete all user data from localStorage
function deleteAllUserData() {
localStorage.clear();
}
//ensures the page is fully loaded before functions can be executed.
window.onload = function () {
document.getElementById("userForm").onsubmit = store;
document.getElementById("clearButton").onclick = deleteAllUserData;
document.getElementById("removeButton").onclick = removeUserData;
document.getElementById("retrieveButton").onclick = retrieveUserData;
};
结果
以下视频展示了该项目的最终结果:
关于 LocalStorage 的一些要点
- 本地存储没有数据保护,因此存储敏感数据并不安全,因为任何人都可以访问它们。
- 本地存储最多只能在浏览器上存储 5MB 的数据。
结论
我鼓励您在应用程序中使用 LocalStorage 进行实践和体验。习惯于在其中保存、检索和删除数据。
感谢阅读!
希望这篇文章值得一读。欢迎分享这篇文章,并在Twitter 上关注我 @dboatengx,获取后续更新。
干杯!
文章来源:https://dev.to/dboatengx/javascript-local-storage-explained-1di6