跳到主要内容

网页视图状态怎么持久化？

结论​

页面里用 acquireVsCodeApi() 的 getState 和 setState 保存界面状态，它能跨隐藏和重建。和插件、工作区绑定的数据放 workspaceState 或文件。重启编辑器后还要恢复标签，再加面板序列化器。

展开​

页面状态适合滚动位置、表单草稿、当前选中的页签：

const vscode = acquireVsCodeApi();
const previous = vscode.getState();
vscode.setState({ selectedId, scrollTop });

这个状态由编辑器替这个网页保存。页面被销毁后再次注入 HTML，脚本启动时就能 getState。它不是无限大的仓库，不要塞文件全文。

扩展侧的 workspaceState 适合「这个仓库上次打开的是哪个面板、筛选条件是什么」。globalState 适合跨仓库的个人偏好。两边不要各写一份互不相认的选中项，否则重新打开时以谁为准会乱。

比较干净的分法：

  • 页面只存视图细节，启动时如果没有扩展推来的新数据，再用 getState 恢复。
  • 扩展在收到页面变更后更新自己的状态，作为权威数据。
  • 初始化消息 init 带上权威数据，页面收到后覆盖本地草稿。

编辑器区面板要在窗口重载后回来，注册 registerWebviewPanelSerializer。deserializeWebviewPanel 里重新设置选项和 HTML，再按 state 拉数据。清单和激活事件要能在恢复时把插件激活起来。

容易讲错的点​

  • setState 是替换整个状态对象，不是深合并。要先取出旧状态再写回。
  • 它不是密钥存储。令牌放 secrets。
  • 只改页面状态、扩展完全不知道，那么另一个入口（命令、树节点）打开时会对不上。