导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

⭐ cookie、session、localStorage、sessionStorage

• 存储位置
  • 本地
    • cookie
      • 默认浏览器关闭就过期，保存在内存
      • 设置过期时间后保存在硬盘
    • localStorage、sessionStorage
  • 服务端（内存、文件、redis 都有可能）
    • session
• 存储类型
  • 字符串
    • cookie、localStorage、sessionStorage
  • 任何类型
    • session
• 存储大小
  • cookie
    • 不超过4kb
  • localStorage、sessionStorage
    • 5MB或更大
  • session
    • 没有限制
• 过期时间
  • cookie
    • 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
    • 设置过期时间，则以过期时间为准
  • localStorage
    • 永久
  • sessionStorage
    • 浏览器标签或窗口关闭（跳转到其他地方再回来仍然在，刷新也在。总之当前标签不能丢）

如何遍历出 localStorage 中所有数据

Object.keys(localStorage).forEach(key => {
  console.log(localStorage.getItem(key));
});

第一次访问页面中时弹出引导，用户关闭引导，之后再次进入页面时不希望出现引导，如何实现？

• localStorage

⭐ 浏览器缓存策略

⭐ expires 和 cache-control 区别

都是用的系统时间，但

• expires 是个绝对时间，修改系统时间会有影响
• cache-control 是相对时间，即使客户端时间发生改变，相对时间也不会随之改变，这样可以保持服务器和客户端的时间一致性。
• Cache-control 的优先级高于 Expires

⭐ 讲一下强缓存与协商缓存

缓存分为两种: 强缓存和协商缓存，根据响应的 header 内容来决定。

强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存 在的话，cache-control 的优先级高于 expires。协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match

浏览器缓存读取规则

可以分成Service Worker、Memory Cache、Disk Cache 和 Push Cache，那请求的时候 from memory cache 和 from disk cache 的依据是什么，哪些数据什么时候存放在 Memory Cache 和 Disk Cache 中？

⭐️ 前后端如何设置缓存

1. 在 Node.js 中设置 Cache-Control

如果有某些 API 或动态资源是通过 Node.js 提供的，可以在响应中设置 Cache-Control 头。

const express = require('express');
const app = express();

// 设置静态文件缓存
app.use('/static', express.static('public', {
  maxAge: '30d', // 缓存时间为30天
}));

// 设置 API 缓存
app.get('/api/data', (req, res) => {
  res.set('Cache-Control', 'public, max-age=3600'); // 缓存1小时
  res.json({ data: 'Your data here' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

2. 在 Nginx 中设置 Cache-Control

如果前端资源（例如 dist 目录）是通过 Nginx 提供的，可以在 Nginx 配置文件中设置缓存策略。下面是一个简单的 Nginx 配置示例：

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /path/to/your/vue/dist;
        try_files $uri $uri/ /index.html;
    }

    # 针对静态资源设置缓存
    location ~* \\.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2|ttf)$ {
        root /path/to/your/vue/dist;
        expires 30d; # 缓存时间为30天
        add_header Cache-Control "public, max-age=2592000"; # 设置Cache-Control头
        try_files $uri $uri/ /index.html;
    }
}

3. 设置前端资源缓存

对于前端资源（如 JavaScript、CSS、图像等），你可以通过 Nginx 的 expires 指令设置缓存时间。常见的做法是为静态资源设置长时间缓存，例如 30 天或更长。

4. 缓存时间策略

• 频繁更新的资源：如 HTML 文件，建议设置较短的缓存时间，甚至可以使用 no-cache 来确保每次请求都从服务器获取最新版本。
• 不常更新的静态资源：如图片、字体、第三方库（已版本化），可以设置较长的缓存时间（例如 30 天或更长）。
• 版本化资源：可以通过文件名中包含版本号（如 app.12345.js）来实现持久缓存，这样在资源更新时只需修改引用路径即可。

5. 在 Vue 项目中版本化资源

Vue CLI 默认在生产构建时会对资源进行哈希处理以实现版本化。例如：

// vue.config.js
module.exports = {
  configureWebpack: {
    output: {
      filename: '[name].[contenthash].js',
      chunkFilename: '[name].[contenthash].js',
    },
  },
};

通过这种方式，即使设置了长时间的缓存策略，当文件内容变化时，文件名会变更，浏览器会请求新的资源。

6. 确保缓存生效

• 使用浏览器开发者工具检查：确保响应头中有正确的 Cache-Control 设置。
• 测试缓存策略：清空浏览器缓存后访问你的应用，观察资源是否从缓存加载。

⭐ 介绍下如何实现 token 加密

jwt 举例：

1. 需要一个secret（随机数）
2. 后端利用 secret 和加密算法 (如：HMAC-SHA256) 对 payload(如账号信息) 生成一个字符串(token)，返回前端
3. 前端每次 request 在 header 中带上 token
4. 后端用同样的算法解密

以最常见的 token 格式 jwt 为例

token 分为三段，分别是 header、payload、signature

其中，header 标识签名算法和令牌类型；payload 标识主体信息，包含令牌过期时间、发布时间、发行者、主体内容等；signature 是使用特定的算法对前面两部分进行加密，得到的加密结果。

token 有防篡改的特点，如果攻击者改动了前面两个部分，就会导致和第三部分对应不上，使得 token 失效。而攻击者不知道加密秘钥，因此又无法修改第三部分的值。

所以，在秘钥不被泄露的前提下，一个验证通过的 token 是值得被信任的。

⭐ localhost:3000 与 localhost:5000 的 cookie 信息是否共享

根据同源策略，cookie 是区分端口的，但是浏览器实现来说，“cookie 区分域，而不区分端口，也就是说，同一个 ip 下的多个端口下的 cookie 是共享的！

et-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly 不同协议 http 和 https，也可以共享 但是带有 Secure 属性的不能被 http 共享 带有 HttpOnly 属性的 cookie 无法被 document.cookie 访问

cookie 和 localStorage 在同一浏览器的相同域名、不同端口号下，是否可以共享

cookie 和 localStorage 都受同源策略的限制

但在同一浏览器的相同域名、不同端口号下：

• cookie 可以共享
• localStorage 不可以共享

深入理解浏览器的缓存机制