• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

215 - 本地存储 - localStorage - 数据的存储与读取

作者：

贺及楼

成为作者

更新日期：2025-02-27 18:13:20

前端 - HTML5 《本地存储 - localStorage - 数据的存储与读取》

在前端开发中，我们经常会遇到需要在客户端存储数据的需求。比如，记住用户的偏好设置、缓存一些常用的数据等，以提升用户体验和减少服务器的压力。HTML5 提供了两种本地存储的方式：localStorage 和 sessionStorage，本文将重点介绍 localStorage，详细讲解它的数据存储与读取方法。

什么是 localStorage

localStorage 是 HTML5 新增的一个会话存储对象，它允许网页在浏览器中存储键值对的数据，这些数据会一直存储在浏览器中，除非手动清除，否则不会过期。localStorage 的存储容量一般为 5MB 左右，不同浏览器可能会有所差异。

与传统的 cookie 相比，localStorage 具有更大的存储容量，而且不会随着 HTTP 请求发送到服务器，减少了不必要的流量开销。

localStorage 的基本使用

数据存储

localStorage 使用 setItem() 方法来存储数据，该方法接受两个参数：键（key）和值（value）。下面是一个简单的示例：

  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.     <button onclick="saveData()">保存数据</button>
  12.     <script>
  13.         function saveData() {
  14.             // 存储一个字符串
  15.             localStorage.setItem('username', 'JohnDoe');
  16.             // 存储一个数字
  17.             localStorage.setItem('age', 25);
  18.             alert('数据已保存！');
  19.         }
  20.     </script>
  21. </body>
  23. </html>

在上面的代码中，我们定义了一个按钮，当用户点击按钮时，会调用 saveData() 函数。在 saveData() 函数中，我们使用 setItem() 方法分别存储了一个字符串和一个数字。

数据读取

localStorage 使用 getItem() 方法来读取数据，该方法接受一个参数：键（key）。如果指定的键存在，则返回对应的值；如果键不存在，则返回 null。下面是一个读取数据的示例：

  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.     <button onclick="readData()">读取数据</button>
  12.     <script>
  13.         function readData() {
  14.             // 读取用户名
  15.             const username = localStorage.getItem('username');
  16.             // 读取年龄
  17.             const age = localStorage.getItem('age');
  18.             alert(`用户名：${username}，年龄：${age}`);
  19.         }
  20.     </script>
  21. </body>
  23. </html>

在上面的代码中，我们定义了一个按钮，当用户点击按钮时，会调用 readData() 函数。在 readData() 函数中，我们使用 getItem() 方法分别读取了之前存储的用户名和年龄，并使用 alert() 方法显示出来。

数据删除

localStorage 使用 removeItem() 方法来删除指定键的数据，使用 clear() 方法来清空所有存储的数据。下面是一个删除数据的示例：

  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.     <button onclick="removeData()">删除指定数据</button>
  12.     <button onclick="clearData()">清空所有数据</button>
  13.     <script>
  14.         function removeData() {
  15.             // 删除用户名
  16.             localStorage.removeItem('username');
  17.             alert('用户名已删除！');
  18.         }
  20.         function clearData() {
  21.             // 清空所有数据
  22.             localStorage.clear();
  23.             alert('所有数据已清空！');
  24.         }
  25.     </script>
  26. </body>
  28. </html>

在上面的代码中，我们定义了两个按钮，分别用于删除指定数据和清空所有数据。当用户点击按钮时，会调用相应的函数，使用 removeItem() 方法删除指定键的数据，使用 clear() 方法清空所有存储的数据。

存储复杂数据

localStorage 只能存储字符串类型的数据，如果需要存储复杂的数据类型，如对象或数组，需要先将其转换为字符串。可以使用 JSON.stringify() 方法将对象或数组转换为 JSON 字符串，使用 JSON.parse() 方法将 JSON 字符串转换为对象或数组。下面是一个存储和读取对象的示例：

  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.     <button onclick="saveObject()">保存对象</button>
  12.     <button onclick="readObject()">读取对象</button>
  13.     <script>
  14.         function saveObject() {
  15.             const user = {
  16.                 name: 'JohnDoe',
  17.                 age: 25,
  18.                 hobbies: ['reading', 'running']
  19.             };
  20.             // 将对象转换为 JSON 字符串
  21.             const userJSON = JSON.stringify(user);
  22.             // 存储 JSON 字符串
  23.             localStorage.setItem('user', userJSON);
  24.             alert('对象已保存！');
  25.         }
  27.         function readObject() {
  28.             // 读取 JSON 字符串
  29.             const userJSON = localStorage.getItem('user');
  30.             if (userJSON) {
  31.                 // 将 JSON 字符串转换为对象
  32.                 const user = JSON.parse(userJSON);
  33.                 alert(`姓名：${user.name}，年龄：${user.age}，爱好：${user.hobbies.join(', ')}`);
  34.             } else {
  35.                 alert('未找到用户数据！');
  36.             }
  37.         }
  38.     </script>
  39. </body>
  41. </html>

在上面的代码中，我们定义了两个按钮，分别用于保存对象和读取对象。当用户点击保存按钮时，会调用 saveObject() 函数，将对象转换为 JSON 字符串并存储到 localStorage 中；当用户点击读取按钮时，会调用 readObject() 函数，从 localStorage 中读取 JSON 字符串并转换为对象。

总结

方法 描述 示例
setItem(key, value) 存储数据 localStorage.setItem('username', 'JohnDoe');
getItem(key) 读取数据 const username = localStorage.getItem('username');
removeItem(key) 删除指定键的数据 localStorage.removeItem('username');
clear() 清空所有存储的数据 localStorage.clear();
JSON.stringify() 将对象或数组转换为 JSON 字符串 const userJSON = JSON.stringify(user);
JSON.parse() 将 JSON 字符串转换为对象或数组 const user = JSON.parse(userJSON);

通过使用 localStorage，我们可以方便地在浏览器中存储和读取数据，提升用户体验和减少服务器的压力。但需要注意的是，localStorage 存储的数据是明文存储的，不适合存储敏感信息。