J

JavaScript 本地存储解释!

2025-05-24

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 非常简单,只需几个步骤:

  1. 转到任何网站或网络应用程序,然后按F12键盘打开浏览器控制台。
  2. 接下来,点击应用程序选项卡,在左侧菜单中,您将在存储LocalStorage选项卡下看到如下所示的内容。

  1. 单击LocalStorage下拉菜单,然后单击下拉项。

可以看出,有两列,keyvalue。这是 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


Enter fullscreen mode Exit fullscreen mode

前面提到过,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));


Enter fullscreen mode Exit fullscreen mode

获取项目()

使用此getItem()方法从 LocalStorage 中检索数据。此方法接受一个参数,用于key保存数据。

例如,要检索上述user对象的数据,您将使用以下语句:



localStorage.getItem("user-info");


Enter fullscreen mode Exit fullscreen mode

上述代码将返回JSON如下所示的字符串:



"{name:"Mandy", age:"23"}"


Enter fullscreen mode Exit fullscreen mode

然后您应该使用该方法将其转换为对象JSON.parse()



JSON.parse(localStorage.getItem('user-info'));


Enter fullscreen mode Exit fullscreen mode

删除项目()

使用该removeItem()方法从 LocalStorage 中移除数据。此方法接受一个key作为参数。

例如,您将使用以下语句user从 LocalStorage 中删除对象。



localStorage.removeItem("user-info");


Enter fullscreen mode Exit fullscreen mode

钥匙()

使用key(index)方法从 LocalStorage 中检索数据,其中index代表nth要检索的数据。



localStorage.key(2);


Enter fullscreen mode Exit fullscreen mode

清除()

使用该clear()方法在特定实例中清除或删除 LocalStorage 中的所有数据。



localStorage.clear()  


Enter fullscreen mode Exit fullscreen mode

项目

现在您已经了解了用于管理 LocalStorage 中数据的主要方法,让我们开始创建一个 Web 应用程序,用户可以在其中执行以下操作:

  • 将数据保存到 LocalStorage
  • 检索数据
  • 使用key
  • 并清除 LocalStorage 中的所有数据。

首先创建一个新文件夹并在代码编辑器中打开它。接下来,创建三个文件:index.htmlstyle.cssmain.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>



Enter fullscreen mode Exit fullscreen mode

这是 CSS 代码。



/* base styles  */
html {
  font-size: 67.5%;
}
body {
  font-size: 1.6rem;
  padding: 0;
  margin: 0;
}

/* form   */
#form {
  margin-left: 2rem;
}



Enter fullscreen mode Exit fullscreen mode

这是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;
};

Enter fullscreen mode Exit fullscreen mode




结果

以下视频展示了该项目的最终结果:

关于 LocalStorage 的一些要点

  • 本地存储没有数据保护,因此存储敏感数据并不安全,因为任何人都可以访问它们。
  • 本地存储最多只能在浏览器上存储 5MB 的数据。

结论

我鼓励您在应用程序中使用 LocalStorage 进行实践和体验。习惯于在其中保存、检索和删除数据。

感谢阅读!

希望这篇文章值得一读。欢迎分享这篇文章,并在Twitter 上关注我 @dboatengx,获取后续更新。

干杯!

文章来源:https://dev.to/dboatengx/javascript-local-storage-explained-1di6
PREV
在浏览器中运行虚拟机
NEXT
React 变得更加出色