MossDocuments

LocalStorage ​

一句话解释：浏览器提供的本地存储空间，数据保存在用户电脑上。

类比：就像你房间里的抽屉，东西放进去，关了门下次开门还在。

特点：

• 只存在用户自己的浏览器里
• 刷新页面、关闭浏览器数据都还在
• 换个浏览器或电脑数据就没了
• 适合存简单的用户偏好、记录等

使用示例：

// 存数据
localStorage.setItem('name', '小明');

// 取数据
const name = localStorage.getItem('name');  // '小明'

// 删数据
localStorage.removeItem('name');

JSON ​

全称：JavaScript Object Notation

一句话解释：一种数据格式，用来存储和传输数据。

类比：就像一种通用的「表格格式」，大家都能看懂。

长什么样：

{
  "name": "小明",
  "age": 25,
  "hobbies": ["读书", "跑步", "编程"]
}

常见用途：

• API 返回的数据
• 配置文件
• LocalStorage 存储复杂数据

环境变量 ​

一句话解释：存放敏感信息（如密钥、密码）的地方，不会被写进代码里。

类比：就像保险箱。密码放在保险箱里，而不是贴在门上。

为什么重要：

• 密钥写在代码里，一旦代码公开，密钥就泄露了
• 环境变量不会被上传到 GitHub
• 是安全的最佳实践

通常的用法：

1. 创建 .env 文件存放敏感信息
2. 代码中通过 process.env.XXX 读取
3. .env 文件加入 .gitignore，不上传

域名 ​

一句话解释：网站的地址，让人能找到你的网站。

类比：就像你家的门牌号。有了地址，别人才能找到你家。

结构：

https://www.example.com/about
  │       │      │      │
协议    子域名  主域名  路径

获取域名：

• 去域名注册商（如阿里云、腾讯云）购买
• 连接到你的部署平台

响应式设计 ​

一句话解释：让网页在不同尺寸的屏幕上都能正常显示。

类比：就像水，能适应不同形状的容器。

实现方式：

• 使用百分比而不是固定像素
• 使用媒体查询针对不同屏幕写样式
• 使用 Flexbox/Grid 布局

为什么重要： 现在人们用手机、平板、电脑访问网站，响应式设计让所有用户都有好的体验。