前端存储与样式进阶：localStorage 与 Stylus 入门指南

一、localStorage：浏览器中的数据小仓库

大家在浏览网页时，有没有遇到过这种情况？当你在一个网站上填写了一半表单，突然刷新了页面，结果发现之前填的内容全没了，只能重新再来。这种体验是不是很糟糕？

其实，浏览器为我们提供了一种解决方案，那就是 localStorage。它就像是浏览器给我们分配的一个小仓库，我们可以把一些数据存放在这里，即使页面刷新甚至关闭再重新打开，这些数据依然存在。

1. localStorage 的基本使用

localStorage 的使用非常简单，它提供了几个常用的方法来操作存储的数据：

javascript 复制代码

// 存储数据
localStorage.setItem('username', '小明');
localStorage.setItem('age', 18);

// 获取数据
const username = localStorage.getItem('username');
const age = localStorage.getItem('age');

console.log(`欢迎 ${username}，你今年 ${age} 岁了`);

// 删除数据
localStorage.removeItem('age');

// 清空所有数据
// localStorage.clear();

2. 存储复杂数据类型

localStorage 只能存储字符串类型的数据，如果我们想要存储对象、数组等复杂数据类型，需要先将它们转换为字符串。这时，JSON.stringify () 和 JSON.parse () 这两个方法就派上用场了。

javascript 复制代码

// 存储对象
const user = {
    name: '小红',
    age: 20,
    hobbies: ['读书', '画画']
};

localStorage.setItem('user', JSON.stringify(user));

// 获取并解析对象
const userData = JSON.parse(localStorage.getItem('user'));

console.log(userData.name); // 输出：小红
console.log(userData.hobbies[0]); // 输出：读书

3. localStorage 的应用场景

localStorage 的应用场景非常广泛，比如：

记住用户的登录状态
保存用户的偏好设置，如主题颜色、字体大小等
缓存一些不经常变化的数据，减少网络请求
临时保存用户在表单中填写的数据，防止意外丢失

4. 注意事项

虽然 localStorage 很方便，但也有一些需要注意的地方：

存储容量有限，一般为 5-10MB
不要存储敏感信息，如密码、银行卡号等，因为 localStorage 没有加密机制
数据不会过期，除非手动删除，如果存储了大量无用数据，可能会影响性能

二、Stylus：让 CSS 编写更加高效

2. 安装 Stylus

要使用 Stylus，首先需要安装它。如果你已经安装了 Node.js 和 npm，可以使用以下命令全局安装 Stylus：

bash 复制代码

npm install -g stylus

安装完成后，可以通过以下命令检查版本：

bash 复制代码

stylus --version

3. Stylus 的基本语法

Stylus 的语法非常简洁，它使用缩进代替花括号，使用空格代替冒号，让代码看起来更加清爽。

下面是一个简单的 Stylus 示例：

stylus 复制代码

// 定义变量
$primary-color = #3498db
$font-size = 16px

// 定义混合
border-radius(radius)
  -webkit-border-radius: radius
  -moz-border-radius: radius
  border-radius: radius

// 样式定义
body
  font: $font-size/1.5 Arial, sans-serif
  color: #333
  background-color: #f5f5f5

.container
  width: 960px
  margin: 0 auto

.button
  padding: 10px 20px
  border: none
  border-radius(5px)
  background-color: $primary-color
  color: white
  cursor: pointer
  
  &:hover
    background-color: darken($primary-color, 10%)

执行以下命令

bash 复制代码

stylus common.styl -o common.css

上面的 Stylus 代码将会被编译成 CSS

如下：

css 复制代码

body {
  font: 16px/1.5 Arial, sans-serif;
  color: #333;
  background-color: #f5f5f5;
}

.container {
  width: 960px;
  margin: 0 auto;
}

.button {
  padding: 10px 20px;
  border: none;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: #3498db;
  color: white;
  cursor: pointer;
}

.button:hover {
  background-color: #217dbb;
}

你可以使用 -w（或 --watch）参数让 Stylus 监听文件变化并自动编译，避免每次手动执行命令。

自动编译命令

bash 复制代码

stylus -w common.styl -o common.css

三、CSS 背景与布局相关知识

1. background-size 属性

在 CSS 中，background-size 属性用于设置背景图片的大小。它有几个常用的值：

cover：背景图片会等比例缩放，直到完全覆盖整个容器，可能会有部分图片被裁剪
contain：背景图片会等比例缩放，直到图片的宽度或高度完全适应容器，图片会完整显示，但可能会有空白区域
auto：使用图片的原始大小
具体数值：如 background-size: 200px 100px; 分别设置宽度和高度
百分比：如 background-size: 50% 50%; 相对于容器的大小

css 复制代码

.container {
    width: 500px;
    height: 300px;
    background-image: url('example.jpg');
    background-size: cover;
    background-position: center;
}

2. CSS 继承特性

在 CSS 中，有些属性是可以继承的，有些则不能。继承是指子元素会自动继承父元素的某些属性值。

常见的可继承属性有：color、font-family、font-size、line-height、text-align 等。

不可继承的属性有：width、height、margin、padding、border、background 等。

css 复制代码

body {
    font-family: 'Arial', sans-serif;
    color: #dd2626;
    font-size: 16px;
}

p {
    /* 不需要再次设置font-family和color，会自动继承自body */
    margin-bottom: 10px;
}

3. viewport 与用户缩放

在移动端开发中，viewport 是一个非常重要的概念。viewport 代表了浏览器中用于显示网页的区域。

我们可以通过 meta 标签来设置 viewport：

html 复制代码

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

其中，user-scalable=no 表示不允许用户通过手势缩放页面。这样可以确保网页在移动设备上以设计师或开发者设定的最佳视图展示，保持布局的一致性和设计意图的完整性。

不过，需要注意的是，除非有特殊需求，否则不建议禁用用户缩放功能，因为这可能会影响部分用户的体验。

四、总结

通过本文，我们学习了 localStorage 的基本使用方法，它可以帮助我们在浏览器中存储数据，提高用户体验；了解了 Stylus 这种 CSS 预处理器，它让我们可以更加高效地编写 CSS 代码；还学习了 CSS 的一些高级特性和 viewport 的相关知识。

希望这些知识对你有所帮助，让你在前端开发的道路上更进一步！