← 全部文章

指南

TEMP CSS 和 TEMP JS 窗口关闭时不再丢数据——v3.2.2 与 v3.2.3

20 5月 2026 · 作者 JustZix Team

几个星期以来,我们的待办里一直挂着一条:「TEMP 的 × 会清空 sessionStorage」。题目不大,问题却安静地存在了好几个月——一次不小心点到 × 按钮,代码、日志、几何尺寸就全没了。2026 年 5 月,我们终于在 v3.2.2 修好了它,紧接着又在 v3.2.3 加上了一个用于「主动清空」的按钮。下面就讲讲到底改了什么,以及为什么这个看似不起眼的细节,其实分量很重。

原来出了什么问题

TEMP CSS、TEMP JS、TEMP JS Console 和 TEMP Output Console 这些窗口(快捷键 Ctrl+Alt+G/H/J/K)的状态保存在当前标签页的 sessionStorage 中,使用首次打开时分配的一个随机 id。点 × 关闭会调用 removeTempPane,它会:

• 删除该窗口的状态条目(代码、日志、几何尺寸、viewMode),
• 释放对应的 id,这样后续每一次 Ctrl+Alt+G 都会创建一个新的随机 id。

结果是:内容被不可逆地丢掉了;即便有什么东西恰好侥幸留下,你也找不回来——下一次打开会去查另一个完全不同的 id。一位正在 TEMP CSS 里写选择器的用户,只要不小心点到 ×,20 分钟的工作就没了。

v3.2.2——× 只负责隐藏

在 v3.2.2 中,我们改了模型:TEMP 窗口在关闭时不再被删除,而是被打上一个 closed 标记,连同它的内容、几何尺寸和 viewMode 一起留在 session 里。createTempPane 函数现在是幂等的:重新打开同类型的窗口(例如对 CSS 再次按 Ctrl+Alt+G)会显示出已经存在、保留了原数据的那个窗口,而不是新建一个。injectTempPanesIntoData 只渲染没有被打上 closed 标记的窗口,所以页面重载之后,你仍然能看到本该可见的内容。

TEMP 窗口的数据在标签页被关闭时仍然会消失——这是 sessionStorage 天然的作用域,也是它「数据仅在会话内有效」的原始承诺。页面重载同样会清掉它(sessionStorage 是按标签页 × 源 隔离的,不会跨越页面的自然生命周期)。

v3.2.3——「清空」按钮

既然 × 已经变得「不咬人」了,我们就再加上一个用于主动清空的工具:在 TEMP CSS 和 TEMP JS 的标题栏中,× 旁边新增了一个垃圾桶图标按钮。点击它就一步清空编辑器里的内容:

• 清空操作会进入浏览器的撤销历史——按 Ctrl+Z 就能恢复;
• 对 TEMP CSS 来说,页面上活的 <style> 会立刻同步更新——所见即所得;
• 新增一个 i18n 键 tempPane.clear.title ×8 种语言(用作 tooltip)。

两种意图,两个按钮:隐藏窗口(×)和清空内容(垃圾桶)。之前的 × 把这两件事捆在了一起,变成了一次性的破坏操作。

对日常工作意味着什么

这里举三个能直接感受到差别的具体场景:

• 「先收一下,我马上回来」——你打开了一个 TEMP CSS,里面已经写了一条比较长的 CSS 规则,你想暂时看看不带这个窗口的页面,但一分钟之后还会回来。v3.2.2 之前:× 把代码抹掉了。现在:× 只是隐藏,再按一次 Ctrl+Alt+G 就能带着原来的代码回来。
• 「我把 × 当成关闭按钮按了」——窗口一多就很容易犯这种错。以前:工作丢了。现在:再按一次 Ctrl+Alt+G,你就回到原来的位置。
• 「我想从头开始」——在 v3.2.3 之前,清空的唯一办法就是全选 + 删除,或者关掉 + 丢失。现在:点垃圾桶,反悔就按 Ctrl+Z。

这个新模型顺带打开的其他改进

原先「× 等于清空」的模型,也挡住了一些找不到合适落脚点的小改进:按窗口类型记忆尺寸(v2.13.201)、双击标题栏 = 尺寸切换(v2.13.203)、滚动隔离(v2.13.203)。在重建了窗口状态之后,这三项改进都有了一个一致的位置来保存数据,并对关闭 / 打开做出一致的反应。

另请参阅

• TEMP 窗口——快捷键召唤式窗口的完整介绍
• TEMP 窗口 vs 持久窗口——一份决策模型
• 页面内窗口——位于页面之内的开发者窗口

安装 JustZix——别再因为一次手滑,就丢掉 TEMP 里的代码。