# 本地存储
浏览器的本地存储主要分为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{
//主逻辑业务
}
# sessionStorage
sessionStorage
类似 localStorage
,但其区别在于:
- 存储在
localStorage
的数据可以长期保留; - 存储在
sessionStorage
的关闭页面后即被清空。
# IndexDB
参考