在开发网页或移动网页应用时，我们常常需要做两件非常重要的事情：
- 把数据保存起来（比如用户登录信息、偏好设置）
- 从服务器获取或发送数据（比如登录验证、提交表单）
这两件事分别对应了两个核心概念：
- 前端存储机制
- HTTP 请求
这篇文章会用最通俗易懂的方式带你了解它们是什么、怎么用，以及它们之间是怎么配合工作的！
一、先说“存储”：浏览器能记住什么？
想象一下，你在网上购物。你刚登录了账号，加了几样商品到购物车，然后去上个厕所回来，网页刷新了……你的登录状态和购物车还在吗？
这就靠的是——浏览器的本地存储功能。
1. localStorage：长期记忆型存储
在这篇文章中有使用：React组件实用，每个组件各司其职，成为信息管理大师
- 特点：即使关闭浏览器也不会消失
- 用途：适合用来保存长期的数据，如用户昵称、主题偏好等
// 存储数据
localStorage.setItem("username", "小明");
// 获取数据
let name = localStorage.getItem("username");
console.log(name); // 输出：小明
// 删除数据
localStorage.removeItem("username");
2. sessionStorage：短期记忆型存储
- 特点：只在当前页面打开时有效，关闭标签页就清空
- 用途：适合临时保存一些不需要长期保留的信息，比如验证码、临时表单内容
sessionStorage.setItem("tempData", "这是临时数据");
let temp = sessionStorage.getItem("tempData");
console.log(temp); // 输出：这是临时数据
3. cookie：老式但仍在使用的存储方式
- 特点：体积小（一般最多4KB），随每次 HTTP 请求自动发送给服务器
- 用途：常用于保存用户的登录凭证（token）等
document.cookie = "user=Tom; max-age=3600; path=/";
⚠️ Cookie 现在逐渐被
localStorage和 token 替代，但仍常见于旧系统中。
二、再说“请求”：怎么跟服务器说话？
网站上的数据不可能都存在本地，很多数据必须通过网络从服务器拿。
比如：
- 登录时验证用户名密码
- 搜索商品时显示结果
- 提交订单后跳转支付页
这些都需要通过 HTTP 请求 和服务器沟通。
常见的 HTTP 方法：
| 方法名 | 含义 |
|---|---|
| GET | 获取数据（比如读取文章） |
| POST | 提交数据（比如注册新用户） |
| PUT | 更新数据（比如修改资料） |
| DELETE | 删除数据（比如删除评论） |
举个例子：用 JS 发送一个 GET 请求
fetch('https://api.example.com/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('出错了:', error));
这段代码做了什么？
- 向服务器地址
https://api.example.com/users发送 GET 请求 - 接收服务器返回的数据，并解析成 JSON 格式
- 打印出来看看结果
三、结合起来：存储 + 请求，让网页更聪明
现在我们来模拟一个常见的场景：
场景：用户登录后保存信息，下次访问直接显示欢迎语
步骤一：用户点击登录按钮，发送请求验证账号密码
async function login(username, password) {
const response = await fetch('https://api.example.com/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
const result = await response.json();
if (result.success) {
// 登录成功，保存用户名到 localStorage
localStorage.setItem("username", result.username);
showWelcomeMessage();
} else {
alert("登录失败，请检查用户名或密码");
}
}
步骤二：页面加载时判断是否已登录，如果登录过就显示欢迎语
function showWelcomeMessage() {
const username = localStorage.getItem("username");
if (username) {
document.getElementById("welcome").innerText = `欢迎回来，${username}！`;
}
}
这样，用户只要登录一次，下次再访问这个网站就能自动识别身份，体验更好！
四、进阶一点：token 认证 + 自动携带请求头
现在很多网站使用 token（令牌）来做登录认证。
流程如下：
- 用户登录 → 服务器返回 token
- 浏览器将 token 存入
localStorage - 后续请求带上 token，服务器验证身份
// 登录后保存 token
localStorage.setItem("token", "abc123xyz");
// 发起请求时带上 token
fetch('https://api.example.com/user/profile', {
headers: {
'Authorization': 'Bearer ' + localStorage.getItem("token")
}
})
.then(res => res.json())
.then(data => console.log(data));
五、总结一句话：
前端存储就像大脑的记忆，帮你记住重要信息；HTTP 请求就像嘴巴，帮你和服务器对话交换数据。两者结合，就可以做出智能又实用的网页应用。
