记住用户偏好

目标：用 LFStore 持久化用户的选择。做一个夜间模式开关，刷新页面、换个站点，状态都还在。

main.js

// ==UserScript==
// @name Dark Mode Toggle
// @description 记住用户的夜间模式偏好
// @match https://example.com/*
// @require dom
// @require store
// ==/UserScript==

function applyDark(enabled) {
  document.documentElement.style.filter = enabled ? "invert(1) hue-rotate(180deg)" : "";
}

LFDOM.ready(async () => {
  applyDark(await LFStore.get("dark-enabled", false));

  const root = LFDOM.createFloatingRoot({ id: "dark-toggle" });
  root.innerHTML = "<button id='lf-dark-btn'>Dark Mode</button>";
  root.querySelector("#lf-dark-btn").addEventListener("click", async () => {
    const next = !(await LFStore.get("dark-enabled", false));
    await LFStore.set("dark-enabled", next);
    applyDark(next);
    LFDOM.toast(next ? "ON" : "OFF");
  });
});

关键点

LFStore 的所有方法都是异步的，必须 await
数据按应用隔离、跨站点共享：同一个应用在 Commerce 和 1688 上读到同一份数据，不同应用互相看不见
数据存在扩展后台的 IndexedDB，不受页面 localStorage 清理影响
get(key, fallbackValue) 的第二个参数是键不存在时的默认值，省去手动判空

记住用户偏好 ​

关键点 ​

记住用户偏好

关键点