用户调整预览图尺寸后可自动恢复设置，通过localStorage以"gallery_thumbnail_size"等语义化键名保存字符串值（如"120px"），页面加载时读取并应用至CSS变量或元素样式，配合:root变量与媒体查询实现灵活响应，支持扩展为JSON对象保存多维度偏好。
用户在网页图片库中调整过预览图尺寸（比如缩略图大小），下次打开时能自动恢复这个设置，只需用 localStorage 记住数值并应用即可。
保存用户选择的尺寸值
当用户通过滑块、下拉菜单或按钮切换预览图尺寸时，在对应事件处理函数中把数值存入 localStorage：
- 推荐使用有意义的键名，如
"gallery_thumbnail_size"，避免用模糊名称如"size" - 值建议统一存为字符串或数字（
localStorage只支持字符串），例如：localStorage.setItem("gallery_thumbnail_size", "120");
或带单位（便于后续直接用于 CSS）：localStorage.setItem("gallery_thumbnail_size", "120px"); - 若使用范围滑块（
<input type="range">），监听input或change事件实时保存
页面加载时读取并应用偏好设置
在 DOM 加载完成后（如 DOMContentLoaded 或 $(document).ready() 中）读取并生效：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 先尝试获取：
const savedSize = localStorage.getItem("gallery_thumbnail_size"); - 存在则应用到预览图容器或 CSS 变量上，例如：
document.documentElement.style.setProperty("--thumb-size", savedSize);
或直接设置元素样式：document.querySelectorAll(".thumbnail").forEach(el => el.style.width = savedSize); - 记得提供默认值（如
"80px"）以防首次访问或数据丢失
配合 CSS 实现灵活响应
把尺寸控制交给 CSS，JavaScript 只负责传递值，更简洁可靠：
立即学习“前端免费学习笔记（深入）”；
- 在 CSS 中定义变量和基础规则：
:root { --thumb-size: 80px; }<br>.thumbnail { width: var(--thumb-size); height: var(--thumb-size); } - 这样 JS 只需更新
:root的 CSS 变量，所有缩略图自动重绘，无需操作每个 DOM 元素 - 若需适配不同屏幕，可在媒体查询中覆盖变量值，与用户偏好不冲突
可选：同步多个相关设置（如布局模式+尺寸）
如果用户还选择“网格”或“列表”视图，可一并保存，组成轻量配置对象：
- 用
JSON.stringify()存为单个字段：localStorage.setItem("gallery_prefs", JSON.stringify({ size: "120px", layout: "grid" })); - 读取后解析：
const prefs = JSON.parse(localStorage.getItem("gallery_prefs") || "{}"); - 注意捕获
JSON.parse异常，防止因存储损坏导致脚本中断
