微信登录

本地存储 - localStorage - 数据的删除与更新

前端 - HTML5 《本地存储 - localStorage - 数据的删除与更新》

在前端开发中，HTML5 提供的 localStorage 是一个非常实用的功能，它允许我们在浏览器中存储数据，并且这些数据不会随着页面的关闭而丢失。本文将详细介绍如何对 localStorage 中的数据进行删除与更新操作。

1. 什么是 localStorage

localStorage 是 HTML5 新增的一个会话存储对象，它用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页后数据仍然存在。localStorage 中存储的数据没有过期时间，除非手动删除，否则数据不会过期。

基本使用

以下是一个简单的示例，展示如何向 localStorage 中存储数据：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>localStorage 示例</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 存储数据
  13.         localStorage.setItem('username', 'JohnDoe');
  15.         // 获取数据
  16.         const username = localStorage.getItem('username');
  17.         console.log(username); 
  18.     </script>
  19. </body>
  21. </html>

在上述代码中，我们使用 setItem 方法向 localStorage 中存储了一个键值对，键为 username，值为 JohnDoe。然后使用 getItem 方法获取该键对应的值，并将其打印到控制台。

2. 数据的删除

在 localStorage 中，有两种常见的删除数据的方法：删除单个数据项和清空所有数据。

2.1 删除单个数据项

使用 removeItem 方法可以删除 localStorage 中指定键的数据项。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>删除单个数据项</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 存储数据
  13.         localStorage.setItem('age', '25');
  15.         // 删除数据
  16.         localStorage.removeItem('age');
  18.         // 验证数据是否已删除
  19.         const age = localStorage.getItem('age');
  20.         console.log(age); 
  21.     </script>
  22. </body>
  24. </html>

在上述代码中，我们先存储了一个键为 age 的数据项，然后使用 removeItem 方法删除该数据项，最后验证该数据项是否已被删除。

2.2 清空所有数据

使用 clear 方法可以清空 localStorage 中的所有数据项。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>清空所有数据</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 存储数据
  13.         localStorage.setItem('city', 'New York');
  14.         localStorage.setItem('country', 'USA');
  16.         // 清空所有数据
  17.         localStorage.clear();
  19.         // 验证数据是否已清空
  20.         const city = localStorage.getItem('city');
  21.         const country = localStorage.getItem('country');
  22.         console.log(city); 
  23.         console.log(country); 
  24.     </script>
  25. </body>
  27. </html>

在上述代码中，我们先存储了两个数据项，然后使用 clear 方法清空所有数据项，最后验证数据是否已被清空。

3. 数据的更新

要更新 localStorage 中的数据，只需再次使用 setItem 方法，将相同的键赋予新的值即可。

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>数据更新</title>
  8. </head>
  10. <body>
  11.     <script>
  12.         // 存储数据
  13.         localStorage.setItem('email', 'johndoe@example.com');
  15.         // 更新数据
  16.         localStorage.setItem('email', 'newemail@example.com');
  18.         // 获取更新后的数据
  19.         const email = localStorage.getItem('email');
  20.         console.log(email); 
  21.     </script>
  22. </body>
  24. </html>

在上述代码中，我们先存储了一个键为 email 的数据项，然后使用 setItem 方法将该键的值更新为 newemail@example.com，最后获取更新后的数据并打印到控制台。

4. 总结

操作 方法 示例
存储数据 setItem(key, value) localStorage.setItem('username', 'JohnDoe');
获取数据 getItem(key) const username = localStorage.getItem('username');
删除单个数据项 removeItem(key) localStorage.removeItem('age');
清空所有数据 clear() localStorage.clear();
更新数据 setItem(key, newvalue) localStorage.setItem('email', 'newemail@example.com');

通过本文的介绍，相信你已经掌握了如何对 localStorage 中的数据进行删除与更新操作。这些操作在实际开发中非常有用，例如在用户退出登录时清空 localStorage 中的用户信息，或者在用户修改个人资料时更新 localStorage 中的相关数据。

本地存储 - localStorage - 数据的删除与更新