可直接用 localStorage 跨会话保存弹幕透明度值,页面加载时读取并应用;需校验范围0–1、字符串存取、try...catch容错,并提供默认值0.8。

可以直接用 localStorage 保存用户调整后的弹幕透明度值(比如 0.3、0.7),页面加载时读取并应用,实现跨会话记忆。
获取并保存透明度值
当用户通过滑块或输入框调整弹幕透明度时,把数值存入 localStorage:
- 确保值是合法数字(范围建议 0–1),可做简单校验:
const alpha = Math.min(1, Math.max(0, parseFloat(value) || 0.8)) - 使用
localStorage.setItem('danmakuAlpha', alpha.toString())存储(字符串形式更稳妥) - 若使用 range input(
<input type="range">),监听input或change事件实时保存
页面初始化时读取并应用
视频播放器初始化或弹幕渲染前,从 localStorage 读取并设置样式:
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用
const savedAlpha = localStorage.getItem('danmakuAlpha')获取值 - 转换为浮点数:
const alpha = savedAlpha ? parseFloat(savedAlpha) : 0.8(提供合理默认值) - 将该值应用到弹幕元素的 CSS:
element.style.opacity = alpha,或注入全局 CSS 变量如:root { --danmaku-opacity: 0.7; },再在弹幕样式中使用opacity: var(--danmaku-opacity);
兼容性与注意事项
LocalStorage 在现代浏览器中支持良好,但需注意边界情况:
- 隐私模式下部分浏览器会禁用 localStorage,应包裹
try...catch防止报错中断逻辑 - 值仅限字符串,存储/读取时务必处理类型转换,避免出现
"0.5"被当字符串参与运算 - 如需同步多个设备,localStorage 不适用,需配合后端或 IndexedDB + 同步机制
不复杂但容易忽略:每次修改后及时保存,每次渲染前主动读取,透明度就自然记住了。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










