本地存储
# 本地存储
浏览器的本地存储主要分为Cookie、WebStorage和IndexDB, 其中WebStorage又可以分为localStorage和sessionStorage。接下来我们就来一一分析这些本地存储方案。
# Cookie
Cookie 主要用于以下三个方面：
- 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
- 个性化设置（如用户自定义设置、主题等）
- 浏览器行为跟踪（如跟踪分析用户行为等）
- 大小只有4k
- 发起请求会默认带上cookie
- 浏览器系列之 Cookie 和 SameSite 属性 (opens new window)
# localStorage
以键值对(Key-Value)的方式存储，永久存储，永不失效，除非手动删除。
大小：每个站点支持5M
使用方法：
// 设置
localStorage.setItem('Libai', 'AINI');
// 获取
localStorage.getItem('Libai');
// 移除
localStorage.removeItem('Libai');
// 移除所有
localStorage.clear();
if(!window.localStorage){
alert("浏览器不支持localstorage");
return false;
}else{
//主逻辑业务
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# sessionStorage
sessionStorage 类似 localStorage，但其区别在于：
- 存储在
localStorage的数据可以长期保留； - 存储在
sessionStorage的关闭页面后即被清空。
# IndexDB
参考