如何异步封装localStorage.setItem与getItem并解决执行顺序问题

一、封装异步版localStorage方法 #

虽然localStorage本身是同步API，但我们可以用Promise将其包装为异步形式，方便使用async/await或.then()控制执行流程：

// 异步setItem，自动序列化JSON
function setLocalStorage(key, value) {
  return new Promise(resolve => {
    window.localStorage.setItem(key, JSON.stringify(value));
    resolve();
  });
}

// 异步getItem，自动反序列化JSON
function getLocalStorage(key) {
  return new Promise(resolve => {
    const rawValue = window.localStorage.getItem(key);
    resolve(rawValue ? JSON.parse(rawValue) : null);
  });
}

二、改造现有代码解决执行顺序问题 #

你的核心需求是确保setSelectedPage执行完成后，updateTable里的getPages能拿到最新值。结合封装的异步方法，改造如下：

1. 改造核心函数为异步形式 #

// 异步版setSelectedPage，确保写入完成后再执行后续逻辑
async function setSelectedPage(pages) {
  await setLocalStorage('pages', pages);
  // 主动触发updateTable（当前标签页修改时，storage事件不会触发自身）
  await updateTable();
}

// 异步版getPages，获取最新存储数据
async function getPages() {
  return await getLocalStorage('pages');
}

// 异步版updateTable，等待getPages返回最新值后再执行后续逻辑
async function updateTable() {
  // 原有逻辑
  // DOES STUFF
  
  const pages = await getPages();
  
  // 基于最新pages执行后续逻辑
  // DOES MORE STUFF
}

2. 跨标签页同步处理（可选） #

如果需要监听其他标签页修改localStorage的情况，可以保留storage事件监听，但要改为异步执行：

window.addEventListener('storage', async (e) => {
  if (e.key === 'pages') {
    await updateTable();
  }
});

三、使用示例 #

用async/await调用 #

async function init() {
  const testPages = [{ id: 1, title: '页面1' }, { id: 2, title: '页面2' }];
  // 等待setSelectedPage和updateTable全部完成
  await setSelectedPage(testPages);
  // 获取最终的最新数据
  const latestPages = await getPages();
  console.log('最新页面数据:', latestPages);
}

init();

用.then()链式调用 #

const testPages = [{ id: 1, title: '页面1' }, { id: 2, title: '页面2' }];
setSelectedPage(testPages)
  .then(() => getPages())
  .then(latestPages => console.log('最新页面数据:', latestPages));

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