可用localStorage保存控制台过滤级别,推荐键名"consoleFilterLevel"存字符串值(如"warn"),切换时校验后立即写入,加载时读取并设默认值,跨标签页需监听storage事件同步。

可以用 localStorage 保存用户选择的控制台过滤级别(如 error、warn、info、debug),实现刷新后仍保留设置。关键不是存字符串本身,而是设计好键名、值格式、读写时机和兜底逻辑。
定义过滤级别键值与存储结构
推荐用固定键名(如 "consoleFilterLevel")存一个字符串值,例如 "warn" 或 "error"。不建议存数组或对象——除非需要多级组合(如同时启用 warn + error),否则徒增复杂度。若需组合,可用逗号分隔的字符串:"error,warn",读取时 .split(',') 处理即可。
保存用户选择的操作方式
当用户在界面切换过滤级别时(比如点击按钮或选中下拉菜单),立即写入:
- 先校验输入是否合法(只允许预设值,避免存入无效字符串)
- 调用 localStorage.setItem('consoleFilterLevel', level)
- 包裹 try...catch,防止浏览器禁用 storage 时崩溃
页面加载时读取并应用过滤设置
在脚本初始化阶段(如 DOM 加载完成后)执行读取:
立即学习“前端免费学习笔记(深入)”;
- 用 localStorage.getItem('consoleFilterLevel') 获取值
- 检查返回是否为 null 或非预期值,若是则使用默认级别(如 "info")
- 将该值同步到你的日志系统中(例如设置全局过滤开关、修改 console 包装函数的行为)
注意跨标签页状态一致性
同一域名下所有标签页共享 localStorage,但修改不会自动通知其他页面。如需实时响应变化(比如用户在另一个标签页改了过滤级别),可监听 storage 事件:
- 在页面中添加 window.addEventListener('storage', e => { if (e.key === 'consoleFilterLevel') { /* 更新当前页过滤逻辑 */ } })
- 注意:触发修改的页面自身收不到该事件,仅其他同源页面能收到



















