在前端开发中，直接获取localStorage的精确使用空间和剩余空间是比较困难的，因为Web API并没有提供直接的方法来查询这些信息。不过，你可以通过一些间接的方式来估算localStorage的使用空间。

以下是一个简单的JavaScript方法，用于估算localStorage的使用空间和剩余空间。这个方法基于以下假设：

1. 使用JSON.stringify将localStorage中的所有数据转换为字符串，并通过该字符串的长度来估算使用空间。
2. 假设每个字符大约占用1个字节（在UTF-8编码中，ASCII字符确实占用1个字节，但非ASCII字符可能占用更多）。
3. 假设浏览器为localStorage分配了固定的最大空间，通常是5MB（但可能因浏览器和配置而异）。

请注意，这种方法只是一个粗略的估算，并不精确。

function estimateLocalStorageSpace() {
  // 将localStorage中的所有数据转换为字符串并计算长度
  const usedSpaceInBytes = new TextEncoder().encode(JSON.stringify(localStorage)).length;

  // 假设localStorage的最大空间为5MB（5 * 1024 * 1024字节）
  const maxSpaceInBytes = 5 * 1024 * 1024;

  // 计算剩余空间
  const remainingSpaceInBytes = maxSpaceInBytes - usedSpaceInBytes;

  // 将字节转换为更易读的单位（例如KB或MB）
  function formatBytes(bytes) {
    if (bytes < 1024) {
      return `${bytes} B`;
    } else if (bytes < 1024 * 1024) {
      return `${(bytes / 1024).toFixed(2)} KB`;
    } else {
      return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
    }
  }

  // 返回使用空间和剩余空间
  return {
    usedSpace: formatBytes(usedSpaceInBytes),
    remainingSpace: formatBytes(remainingSpaceInBytes),
  };
}

// 使用示例：
const spaceInfo = estimateLocalStorageSpace();
console.log('Used Space:', spaceInfo.usedSpace);
console.log('Remaining Space:', spaceInfo.remainingSpace);

这个方法提供了一个大致的估算，但请记住它并不精确。在实际应用中，你可能需要根据具体需求和浏览器环境来调整这个方法。