如何在窗口刷新后持久化Monaco Editor的编辑器偏好设置

问题背景 #

在浏览器Web UI中集成Monaco Editor时，展示CompletionItem.documentation的悬浮面板默认处于折叠状态，手动展开后仅当前会话生效，刷新标签页或重启浏览器后会恢复默认折叠状态，需要将展开行为持久化。

解决方案 #

Monaco Editor允许通过monaco.editor.create的第三个参数override自定义服务，其中storageService负责存储偏好设置。我们需要实现IStorageService接口，将状态持久化到浏览器localStorage中，替代默认的内存存储（InMemoryStorageService）。

完整实现代码 #

// 基于localStorage实现自定义StorageService
const customStorageService = {
    // 获取字符串类型存储值
    get(key) {
        return localStorage.getItem(key);
    },
    // 删除指定存储键
    remove(key) {
        localStorage.removeItem(key);
    },
    // 获取布尔类型存储值
    getBoolean(key) {
        const value = localStorage.getItem(key);
        return value === 'true';
    },
    // 获取数值类型存储值
    getNumber(key) {
        const value = localStorage.getItem(key);
        return value ? parseInt(value, 10) : 0;
    },
    // 存储任意类型值
    store(key, value) {
        localStorage.setItem(key, value);
    },
    // 状态保存前的监听（空实现即可）
    onWillSaveState() {
        return { dispose: () => {} };
    },
    // 全局存储变更监听（空实现即可）
    onDidChangeStorage() {
        return { dispose: () => {} };
    },
    // 特定键值变更监听（空实现即可）
    onDidChangeValue(key) {
        return () => {};
    }
};

// 创建编辑器并传入自定义StorageService
const value = `function hello() {
    alert
}`;

const myEditor = monaco.editor.create(document.getElementById("container"), {
    value,
    language: "javascript",
    automaticLayout: true,
}, {
    storageService: customStorageService
});

// 初始化默认状态：若未存储过展开偏好，默认设置为展开
if (!localStorage.getItem('expandSuggestionDocs')) {
    localStorage.setItem('expandSuggestionDocs', 'true');
}

代码说明 #

• 自定义StorageService：实现IStorageService的所有方法，将数据读写委托给浏览器localStorage，确保状态跨会话持久化。
• 编辑器集成：在创建编辑器时传入自定义服务，替换默认的内存存储，让Monaco Editor使用我们的持久化逻辑存储偏好。
• 默认状态初始化：首次加载时自动设置expandSuggestionDocs为true，确保默认展开文档；用户手动切换折叠/展开状态时，Monaco Editor会自动调用store方法更新localStorage中的值，实现状态同步。

内容的提问来源于stack exchange，提问作者vityaman