HTML无原生emoji最近使用记录功能，需前端用localStorage+点击事件手动实现：点击时unshift去重存数组，最多15个，注意Safari无痕模式降级、DOM更新优化及移动端适配。
HTML 里没有原生的 emoji 最近使用记录功能
浏览器和 HTML 标准本身不维护、不暴露、也不允许网页直接读取用户全局的 emoji 使用历史（比如系统输入法里的“最近使用”面板）。所谓“最近使用 emoji”，必须由前端自己实现记录逻辑，不能依赖 input、contenteditable 或系统 API 自动回传。
用 localStorage + 点击事件手动记录最近使用的 emoji
最轻量、兼容性最好、也最可控的方式：每次用户点击某个 emoji，就把它推到一个数组开头，去重后存进 localStorage，最多保留 10–20 个。后续渲染“最近使用”栏时，直接读这个数组。
-
localStorage的 key 建议用带域名前缀的，比如emoji_recent_myapp_v1，避免跨站冲突 - 插入新 emoji 时用
Array.unshift()再Array.filter()去重，比Array.push()+reverse()更直观 - 注意 Safari 的无痕模式会拒绝写入
localStorage，需包裹try/catch并降级为空数组 - 不要在
oninput或onkeydown里监听 emoji 输入——用户粘贴、拖入、语音输入等行为无法可靠捕获，且性能差
function recordEmoji(emoji) {
try {
const list = JSON.parse(localStorage.getItem('emoji_recent_myapp_v1') || '[]');
const updated = [emoji, ...list.filter(e => e !== emoji)].slice(0, 15);
localStorage.setItem('emoji_recent_myapp_v1', JSON.stringify(updated));
} catch (e) {
// Safari Private Mode or quota exceeded
}
}
渲染“最近使用”栏时要注意 DOM 更新时机和重复渲染
如果 emoji 面板是动态加载或懒渲染的（比如点击按钮才展开），那“最近使用”列表必须在面板 mount 后再读取并渲染，否则可能拿到旧缓存或空值。另外，避免每次展开都重新生成整个 DOM 树——用 innerHTML 替换整个容器容易丢失焦点、触发重排；推荐用 DocumentFragment 批量更新或只 diff 差异项。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 初始化“最近使用”栏前先检查
localStorage是否可读，不可读时显示默认推荐 emoji（如 ❤️、?、?） - 每个 emoji
<button></button>必须设type="button"，否则在表单内点击会触发表单提交 - 移动端点击区域至少 44×44px，给
button加padding和font-size，别只靠 emoji 本身尺寸 - 别用
img标签加载 emoji —— 系统自带 emoji 渲染更快、更省资源，纯文本 emoji（如"?"）即可
iOS / Android 输入法自带的“最近”和网页实现不互通
手机系统键盘顶部的 emoji 栏（比如 iOS 的“常用”、Gboard 的“最近”）完全独立于网页逻辑，其数据存在系统私有数据库中，网页 JavaScript 无权访问。你做的“最近使用”只是当前网站维度的局部记录，关掉标签页或换域名就清零。这点常被误认为“功能没生效”，其实是设计限制，不是 bug。
立即学习“前端免费学习笔记（深入）”；
真正需要跨设备同步的话，得走后端存储（如登录后存到用户 profile），但那就超出纯 HTML/JS 范畴了。现阶段，老老实实把 localStorage 用稳，处理好异常，比追求“和系统一致”更实际。
