正确实现 localStorage 管理布局方向需同步完成写入、读取与监听：切换时用 setItem 存小写字符串（如'rtl'）；加载时 getItem 判断后设 documentElement.dir 和 class；监听 storage 事件同步其他标签页；需 try-catch 防隐私模式报错，避免 clear() 误删，SSR 时首屏需匹配 localStorage 值。
直接用 localStorage 保存布局方向（LTR/RTL）配置很简单，关键是写入、读取和同步三个环节都做对，否则刷新后方向就回去了。
保存方向设置到 localStorage
用户切换方向时，不能只改 DOM，必须立刻存进 localStorage：
- 用 setItem 存字符串值，比如
localStorage.setItem('layout_direction', 'rtl') - 不要存对象或布尔值，localStorage 只认字符串；存数字也会被转成字符串，但方向这种明确枚举值，用字符串最安全
- 建议统一用小写，避免后续判断时大小写不一致
页面加载时读取并应用方向
DOM 就绪后，第一时间从 localStorage 读值，并设到页面上：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 用 getItem 获取，例如
const dir = localStorage.getItem('layout_direction') - 读出来可能是
null（首次访问）或'ltr'/'rtl'，要加判断再设：if (dir) { document.documentElement.dir = dir; } - 同时给
添加对应 class，比如document.documentElement.className = dir，方便 CSS 区分样式
确保多标签页间方向一致
用户可能在另一个标签页改了方向，当前页需要感知变化：
- 监听 storage 事件：
window.addEventListener('storage', e => { if (e.key === 'layout_direction') { applyDirection(e.newValue); } }) - 注意：这个事件不会在触发修改的标签页自身触发，只通知其他同源页面
-
applyDirection()是你封装的设置 dir 属性和 class 的函数，保持逻辑复用
防错与兼容细节
实际运行中容易出问题的地方：
- 隐私模式下部分浏览器会禁用 localStorage，setItem 可能抛错，建议包
try...catch - 读取时别直接
JSON.parse(localStorage.getItem(...))，方向是字符串，不需要解析 - 不要用
localStorage.clear()清整个存储，避免误删其他配置（如快捷键、草稿） - 如果页面支持服务端渲染（SSR），注意首次 HTML 输出时方向应与 localStorage 值一致，否则会有闪动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
