BuildFire LocalStorage在Admin与Widget间生产环境无法读取问题求助

问题现象 #

本地开发环境中插件功能正常：在Content.js中通过buildfire.localStorage.setItem保存的数据，刷新页面后仍能正常读取；但上传至生产环境（app.buildfire.com）后，Widget.js中通过buildfire.localStorage.getItem读取时，返回的结果均为null。

相关代码 #

Content.js 数据保存代码 #

function saveCredentionals (){
    buildfire.localStorage.setItem("bw_organizer_id", organizer_id, (error) => {
      if (error) return console.error("something went wrong!", error);
      console.log("All is well, data saved and other plugins can now access it");
    });

    buildfire.localStorage.setItem("bw_access_token", access_token, (error) => {
      if (error) return console.error("something went wrong!", error);
      console.log("All is well, data saved and other plugins can now access it");
    });
}

Widget.js 数据读取代码 #

Promise.all([
    buildfire.localStorage.getItem("bw_organizer_id"),
    buildfire.localStorage.getItem("bw_access_token"),
]).then(items => {
    let has_organizer_token = false;
    let has_access_token = false;

    if (items[0]) {
      has_organizer_token = true;
    }

    if (items[1]) {
      has_access_token = true;
    }

    if (has_access_token && has_access_token) { // 注：此处存在笔误，应为has_access_token && has_organizer_token
      displayVideoPage(items[0], items[1]);
    } else {
      setMainContent(<div>Organizer ID and access token required.</div>);
    }
});

可能原因及解决方案 #

1. BuildFire localStorage作用域隔离 #

BuildFire的localStorage默认区分Content和Widget的存储作用域，本地开发环境未严格限制，但生产环境会强制隔离。若未指定共享配置，Widget无法读取Content保存的数据。

解决办法：保存数据时添加isPublic: true参数，开启跨区域数据共享：

// 修改Content.js中的保存逻辑
buildfire.localStorage.setItem("bw_organizer_id", organizer_id, { isPublic: true }, (error) => {
  if (error) return console.error("something went wrong!", error);
  console.log("数据已公开保存，Widget可访问");
});

buildfire.localStorage.setItem("bw_access_token", access_token, { isPublic: true }, (error) => {
  if (error) return console.error("something went wrong!", error);
  console.log("数据已公开保存，Widget可访问");
});

2. 异步保存未完成就触发读取 #

本地环境代码执行速度快，保存操作易完成；但生产环境存在网络延迟，Widget可能在数据未完成保存时就执行读取逻辑。

解决办法：将保存操作包装为Promise，等待全部保存完成后再进行后续操作：

function saveCredentionals (){
  const saveOrganizerId = new Promise((resolve, reject) => {
    buildfire.localStorage.setItem("bw_organizer_id", organizer_id, { isPublic: true }, (error) => {
      error ? reject(error) : resolve();
    });
  });

  const saveAccessToken = new Promise((resolve, reject) => {
    buildfire.localStorage.setItem("bw_access_token", access_token, { isPublic: true }, (error) => {
      error ? reject(error) : resolve();
    });
  });

  Promise.all([saveOrganizerId, saveAccessToken])
    .then(() => {
      console.log("所有数据保存完成");
      // 此处可添加跳转或用户通知逻辑
    })
    .catch(error => console.error("保存失败", error));
}

3. Widget代码逻辑笔误 #

Widget中判断条件has_access_token && has_access_token存在错误，第二个条件应为has_organizer_token。即使数据读取成功，也会因该错误进入提示分支，易被误认为读取失败。

解决办法：修正判断逻辑：

if (has_access_token && has_organizer_token) {
  displayVideoPage(items[0], items[1]);
} else {
  setMainContent(<div>Organizer ID and access token required.</div>);
}

4. 生产环境缓存问题 #

生产环境可能存在旧代码缓存，导致修改后的逻辑未生效。

解决办法：清除浏览器缓存，或在BuildFire后台重新发布插件，确保最新代码部署生效。

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