前端本地存储

初识 Cookie#

• 浏览器存储在本地的一小段字符串数据，用来保存用户状态。所以敏感信息不要放在Cookie
• 一般会自动随着浏览器每次请求发送到服务器上（修改网站语言）

Cookie有什么用

• Cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等利用（Cookie + JS + 后端日志 + 大数据系统）

在浏览器操作Cookie

• 谷歌浏览器-F12控制台-Application-Cookie-网站 输入KV值
• document.cookie 能输出刚才的Cookie

Cookie 的基本用法#

写入Cookie

1
//写入
2
     document.cookie = 'username = youzi';
3
     document.cookie = 'age = 18';
4
     // 不能一起写入
5
     //document.cookie = 'username = youzi;age = 18';

读取Cookie

1
console.log(document.cookie);

Cookie 的属性#

• Cookie 的属性（Attributes）决定了，这个 Cookie 能存多久、在哪些请求中发送、谁可以访问、是否安全等。

• Cookie 的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent0编码，读取时使用decodeURIComponent(解码），一般名称使用英文字母，不要用中文，值可以用中文，但是要编码

• 如果没有设置失效(到期)时间，这样的Cookie称为会话Cookie，它存在内存中，当会话结束，也就是浏览器关闭时，Cookie消失

  1
  //属性可以一起写；expires指定 Cookie 的绝对过期时间
  2
  document.cookie = `username = youzi;expires =${new Date('2026-6-27 13:41:00')}`;

• Max-Age（存活时间）：指定 Cookie 还能存活多少秒。

  1
  document.cookie = 'age=18;max-age=5';

• 如果max-age的值是0或负数，则Cookie会被删除

• Domain（域名）：哪些域名可以使用这个 Cookie。默认值就是当前网站

• HttpOnly：JavaScript 无法访问这个 Cookie。防止XSS 攻击

• SameSite：防止 CSRF 攻击。只有同站请求才发送 Cookie。

• 只有name，value，Domain，path都一样的情况下才算一个Cookie ，才会覆盖

Cookie 的封装#

为什么封装？

1. 语法难用

   实际开发中，我们不会直接到处写：

   1
   document.cookie = 'age=18;max-age=3600';
   2
   document.cookie = 'name=Tom';
   3
   console.log(document.cookie);

   因为 document.cookie 的 API 非常难用：读取需要自己解析字符串；删除需要设置过期时间；修改和设置逻辑重复。

2. document.cookie打印的全部，不能根据k值获取

   1
   document.cookie = 'name=Tom';
   2
   document.cookie = 'age=18';
   3
   document.cookie = 'gender=male';
   4
   console.log(document.cookie);//name=Tom; age=18; gender=male

封装：

1
const cookie = {
2
  set(name, value, maxAge, path = '/') {
3
    document.cookie =
4
      `${encodeURIComponent(name)}=${encodeURIComponent(value)};max-age=${maxAge};path=${path}`;
5
  },
6

7
  get(name) {
8
    const cookies =
9
      document.cookie.split('; ');
10

11
    for (let item of cookies) {
12
      const [key, value] =
13
        item.split('=');
14

15
      if (
16
        decodeURIComponent(key) === name
17
      ) {
18
        return decodeURIComponent(value);
19
      }
20
    }
21

22
    return null;
23
  },
24

25
  remove(name, path = '/') {
26
    document.cookie =
27
      `${encodeURIComponent(name)}=;max-age=0;path=${path}`;
28
  }
29
};
30

31
cookie.set('name', 'Tom', 3600);
32
cookie.get('name');
33
cookie.remove('name');

实际开发中可以使用这个包：js-cookie

1
Cookies.set('token', 'abc');
2
Cookies.get('token');
3
Cookies.remove('token');

Cookie 的注意事项#

1. 大小限制约 4KB
2. 数量有限
3. 自动随请求发送
4. 不要存敏感信息
5. HttpOnly 无法被 JS 读取
6. 删除时 Path/Domain 要一致
7. 只能存字符串
8. 特殊字符要编码
9. 跨域默认不发送 Cookie
10. 会过期，不适合存重要数据

初识 localStorage#

• localStorage 是浏览器提供的一种持久化本地存储，它允许前端把数据保存在浏览器本地，即使：刷新页面、关闭浏览器、重新打开浏览器数据依然存在。

为什么会有 localStorage？

• 以前只有 Cookie，但是 Cookie 有很多缺点：容量小（4KB），自动发送给服务器增加请求体积，所以 HTML5 推出了Web Storage，包括localStorage和sessionStorage

localStorage 的特点

• 永久保存（除非主动删除）
• 不会自动发送给服务器
• 容量大5MB ~ 10MB
• 同源限制：协议、域名和端口全部相同才能访问

localStorage 的 API

1
//保存数据
2
localStorage.setItem('name', 'Tom');
3
//获取数据
4
localStorage.getItem('name');//Tom
5
localStorage.getItem('gender');//null
6
//删除某一项
7
localStorage.removeItem('name');
8
//清空全部
9
localStorage.clear();
10
//获取数量
11
localStorage.length;
12
//获取第几个 key
13
localStorage.key(0);

localStorage 只能存字符串

1
localStorage.setItem('age', 18);
2
localStorage.getItem('age');//"18" 是字符串

存对象怎么办？

1
//错误
2
localStorage.setItem('user', {
3
  name: 'Tom'
4
});
5
//正确
6
const user = {
7
  name: 'Tom',
8
  age: 18
9
};
10

11
localStorage.setItem(
12
  'user',
13
  JSON.stringify(user)
14
);
15
//读取
16
const user = JSON.parse(
17
  localStorage.getItem('user')
18
);
19
//结果
20
{
21
  name: 'Tom',
22
  age: 18
23
}

实际开发中的使用场景

1
//保存 Token
2
localStorage.setItem(
3
  'token',
4
  res.data.token
5
);
6
//保存主题
7
localStorage.setItem(
8
  'theme',
9
  'dark'
10
);
11
//保存用户信息
12
localStorage.setItem(
13
  'userInfo',
14
  JSON.stringify(user)
15
);
16
//保存搜索历史
17
localStorage.setItem(
18
  'history',
19
  JSON.stringify(list)
20
);

为什么 Token 喜欢放 localStorage？

• 不会自动发送、容量大、操作简单

localStorage 的缺点

• 容易被 XSS 攻击，不要把高敏感数据放 localStorage。
• 不会自动过期，需要自己管理过期时间。
• 只能存字符串

localStorage 的注意事项#

• 只能存字符串

• 关闭浏览器不会消失

• 没有过期时间，如果要设置过期：

  1
  //存
  2
  localStorage.setItem(
  3
    'token',
  4
    JSON.stringify({
  5
      value: 'abc',
  6
      expire: Date.now() + 3600 * 1000
  7
    })
  8
  );
  9
  //取
  10
  const data = JSON.parse(
  11
    localStorage.getItem('token')
  12
  );
  13
  
  14
  if (Date.now() > data.expire) {
  15
    localStorage.removeItem('token');
  16
  }

  展开收起

• 容易被 XSS 攻击

• 不会自动发送给服务器

• 同源限制

• 容量有限制，5MB~10MB

• 同步 API，会阻塞 JS 主线程。