当前位置：首页 > 行业动态 > 正文

html保存输入数据

HTML表单可通过JavaScript将输入数据保存至浏览器本地存储（如localStorage/sessionStorage），或通过AJAX提交至服务器端存入数据库/文件系统

本地存储（LocalStorage）

LocalStorage 是一种浏览器提供的 API，用于在客户端长期存储数据，数据不会随浏览器关闭而消失，除非手动清除。

方法 说明
setItem(key, value) 存储数据，key 是键名，value 是字符串形式的值。
getItem(key) 根据键名获取值，返回字符串，需手动解析为原始数据类型。
removeItem(key) 删除指定键名的数据。
clear() 清空所有存储数据。

示例： 

// 存储数据
localStorage.setItem('username', 'JohnDoe');
// 读取数据
const username = localStorage.getItem('username'); // "JohnDoe"
// 删除数据
localStorage.removeItem('username');

会话存储（SessionStorage）

SessionStorage 与 LocalStorage 用法相似，但数据仅在当前页面会话中存活（标签页关闭后清除）。

方法 说明
setItem(key, value) 存储数据，仅当前会话有效。
getItem(key) 获取当前会话数据。
removeItem(key) 删除当前会话数据。
clear() 清空当前会话所有数据。

示例： 

// 存储数据
sessionStorage.setItem('tempData', JSON.stringify({ age: 25 }));
// 读取数据
const tempData = JSON.parse(sessionStorage.getItem('tempData')); // { age: 25 }

Cookies

Cookies 是浏览器提供的小型数据存储机制，可设置过期时间，常用于标记用户状态（如登录信息）。

特点 说明
大小限制 每个 Cookie 最多 4KB，单域名下总限制约 20-50 个。
生命周期 可设置过期时间（expires）或路径（path），默认随会话结束失效。
安全性 可标记为 HttpOnly（仅服务器访问）或 Secure（仅 HTTPS 传输）。

示例： 

// 创建 Cookie（7 天有效期）
document.cookie = "token=abc123; max-age=604800; path=/";
// 读取 Cookie
function getCookie(name) {
  const match = document.cookie.match(new RegExp(`${name}=([^;]+)`));
  return match ? match[1] : null;
}
console.log(getCookie('token')); // "abc123"

表单提交（Server-Side 存储）

通过 HTML 表单将用户输入发送到服务器，由后端数据库或文件系统永久存储。

属性 说明
action 表单提交的目标 URL（后端接口）。
method 提交方式（GET 或 POST），POST 更安全。
input 类型 文本框、复选框等，用户输入的数据会被编码为键值对。

示例： 

<form action="/submit" method="POST">
  <input name="email" placeholder="Enter your email" />
  <button type="submit">Submit</button>
</form>

JavaScript 变量（临时存储）

在脚本运行期间,可用变量临时保存用户输入数据，页面刷新后数据丢失。

示例： 

// 获取输入框值
const inputValue = document.querySelector('input').value;
// 处理数据（如验证或计算）
const result = inputValue.toUpperCase();
// 显示结果
document.querySelector('.output').textContent = result;

存储方式对比表

特性 LocalStorage SessionStorage Cookies 表单提交 JavaScript 变量
生命周期 长期（手动清除） 会话级（标签页） 可设置过期时间 长期（服务器端） 临时（页面刷新）
大小限制 5~10MB 5~10MB 4KB/个 无限制（服务器） 无限制（内存）
安全性 低（客户端暴露） 低 可设置 HttpOnly 高（服务器处理） 高（内存隔离）
适用场景 配置、用户偏好 临时会话数据 登录态、跟踪 敏感数据 即时计算

相关问题与解答

问题 1：如何选择 LocalStorage 和 Cookies？

解答：

  • 若需长期存储非敏感数据（如用户偏好、主题设置），优先用 LocalStorage。
  • 若需跨页面共享数据或标记用户身份（如登录态），且数据量小，用 Cookies。
  • 敏感数据（如密码、Token）应避免存储在两者中，需通过加密或后端处理。

问题 2：表单提交后如何防止敏感数据泄露？

解答：

  • 使用 POST 而非 GET，避免数据暴露在 URL 中。
  • 在后端接口开启 HTTPS，防止网络传输被劫持。
  • 对敏感数据（如密码）进行 哈希加密，而非明文存储。
  • 设置 Cookie 的 Secure 和 HttpOnly 标志，防止 JavaScript
html表单localstorage
0

相关文章