本文转载自https://juejin.cn/post/7149380173027573767
网络存储
Web 存储是 HTML5 的重要功能之一，它允许 Web 应用程序在用户浏览器中本地存储数据。 两种最常见的 Web 存储形式是 LocalStorage 和 Session Storage。这两种形式的网络存储之间的主要区别在于，保存在其中的数据LocalStorage永远不会离开浏览器，并且会一直保留在那里，直到您明确将其删除。相反，Session Storage一旦浏览器选项卡/窗口关闭，存储在其中的数据就会被删除。
什么是本地存储？
LocalStorage 是浏览器提供的一种 Web 存储形式，它允许 Web 应用程序将数据本地存储在用户的浏览器中，并且没有过期日期。在这里，即使您关闭浏览器选项卡/窗口，存储的数据也将保持可用。
请注意，存储在 LocalStorage 中的数据仅保留在用户用于访问站点的设备上的浏览器中。因此，如果用户稍后使用不同的浏览器或在另一台设备上重新访问同一站点，他们将无法访问存储的数据。
本地存储用例
下面介绍一些 LocalStorage 的日常使用案例。
1. 存储部分提交的表单数据
如果用户在线填写长表单，LocalStorage 可以成为存储用户输入的有用资源。在这种情况下，即使互联网在填写表单和提交表单之间断开连接，用户也不会丢失他们的输入，并且可以从他们离开的地方继续。
2.缓存
缓存是指在用户设备上存储诸如登录详细信息之类的数据，以便可以更快地处理未来对该数据的请求。您可以使用 LocalStorage 缓存整个网站，以便用户即使在离线时仍然可以访问该网站。
3. 基础应用数据库
如前所述，数据存储最初只能通过后端与数据库通信来实现。但是现在，使用 LocalStorage，您可以在前端存储数据而无需数据库。因此 LocalStorage 有时可以作为基本应用程序的“小”数据库。
如何访问本地存储
访问 LocalStorage 非常简单，只需几个步骤：
- 转到任何网站或 Web 应用程序，然后按
F12键盘打开浏览器控制台。 - 接下来，单击应用程序选项卡，在左侧菜单中，您将
LocalStorage在存储选项卡下看到如下所示。
- 单击
LocalStorage下拉菜单并进一步单击一个/下拉项目。
可以看出，有两列key， 和value。这是 LocalStorage 存储您保存到其中的所有数据的地方。
如何使用本地存储
您可以使用以下方法来管理 LocalStorage 中的数据。
| 方法 | 描述 |
|---|---|
setItem() | 将数据存储在 LocalStorage 中。 |
getItem() | 从 LocalStorage 获取或检索数据 |
removeItem() | 使用密钥从 LocalStorage 中删除数据 |
key() | 从指定索引处的 LocalStorage 检索数据 |
setItem（）
此方法用于将数据存储在 LocalStorage 中。它接受一个键作为它的第一个参数，然后一个值作为第二个参数。
让我们LocalStorage使用以下内容添加数据。
perl
复制代码
localStorage.setItem("name", "Mandy"); // `name`是键，`Mandy`是值
前面提到过，LocalStorage 将数据存储为字符串，所以如果要保存对象和数组等数据，需要使用JSON.stringify()方法将它们转换为字符串。
让我们看看这是如何工作的！
javascript
复制代码
const user = { name: "小明", age: 23, }; localStorage.setItem("user-info", JSON.stringify(user)); const names = ["小明", "小张", "小王"]; localStorage.setItem("names", JSON.stringify(names));
getItem()
使用getItem()方法从 LocalStorage 中检索数据。此方法接受单个参数，key用于保存数据。
例如，要检索上述user对象等数据，您将使用以下语句：
javascript
复制代码
localStorage.getItem("user-info");
上面的代码将返回一个JSON字符串，如下所示：
arduino
复制代码
"{name:"小明", age:"23"}"
然后，您应该使用该JSON.parse()方法将其转换为对象。
javascript
复制代码
JSON.parse(localStorage.getItem('user-info'));
removeItem()
使用removeItem()方法从 LocalStorage 中删除数据。此方法接受 akey作为参数。
例如，您将使用以下语句user从 LocalStorage 中删除对象。
javascript
复制代码
localStorage.removeItem("user-info");
key()
使用key(index)方法从 LocalStorage 中检索数据，其中index表示nth要检索的数据。
ini
复制代码
localStorage.key(2);
clear（）
使用该clear()方法清除或删除特定实例的 LocalStorage 中的所有数据。
javascript
复制代码
localStorage.clear()
)项目
现在您已经了解了用于管理 LocalStorage 中数据的主要方法，让我们通过创建一个用户可以的 Web 应用程序来动手：
- 将数据保存到 LocalStorage
- 检索数据
- 使用删除/删除数据
key - 并清除 LocalStorage 中的所有数据。
让我们首先创建一个新文件夹并在代码编辑器中打开它。接下来，创建两个文件index.html，main.js`。
进行编写吧
该index.html文件将包含 Web 应用程序的 HTML 标记。HTML 代码包含一个表单，该表单具有带有按钮的各种输入字段。
html
复制代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Local Storage</title> </head> <body> <div id="form"> <form id="userForm"> <h1>LocalStorage</h1> <label for="userName">用户名</label> <input type="text" id="userName" placeholder="请输入用户名" required autofocus /><br /> <label for="age">年龄</label> <input type="number" id="age" placeholder="请输入年龄" required /><br /> <label for="key">Key</label> <input type="text" id="key" placeholder="请输入Key" required /><br /> <button type="submit">保存用户</button> </form> <br /> <label for="key">查找</label> <input type="text" id="retrieveKey" placeholder="请输入Key来查找密钥" required /><br /> <button id="retrieveButton">查找用户</button> <br /> <div id="userData"></div> <br /> <label for="removeKey">删除</label> <input type="text" id="removeKey" placeholder="removeKey" required /><br /> <button id="removeButton">删除用户</button> <br /> <button id="clearButton">删除所有用户</button> </div> </body> <script type="text/javascript" src="main.js"></script> </html>
这是main.js包含从 LocalStorage 存储、查找和删除数据的所有函数的文件。
JavaScript
复制代码
function store() { var userName = document.getElementById("userName").value; var age = document.getElementById("age").value; var key = document.getElementById("key").value; const user = { userName, age, }; localStorage.setItem(key, JSON.stringify(user)); } 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 = ""; } function removeUserData() { var removeKey = document.getElementById("removeKey").value; localStorage.removeItem(removeKey); removeKey.value = ""; } function deleteAllUserData() { localStorage.clear(); } window.onload = function () { document.getElementById("userForm").onsubmit = store; document.getElementById("clearButton").onclick = deleteAllUserData; document.getElementById("removeButton").onclick = removeUserData; document.getElementById("retrieveButton").onclick = retrieveUserData; };
结论
- 本地存储没有数据保护,因此存储敏感数据并不安全,因为任何人都可以访问它们。
- 本地存储最多只能在浏览器上存储 5MB 的数据。
5151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
