无需登录 数据私有 本地保存

Storage Buckets API 演示 - 分离存储空间与策略

3
0
0
0
第一步:创建存储桶

进入演示工具主界面后,点击「创建存储桶」按钮。在弹出的配置面板中,输入存储桶名称(建议使用小写字母和连字符,如 user-uploads),选择文件大小上限(默认 5MB),并指定允许的 MIME 类型(如 image/* 表示仅允许图片文件)。确认后,系统会在存储桶列表中显示新建的桶,默认为私有策略。

第二步:理解公开与私有策略

在存储桶列表中,找到刚创建的桶,点击「策略切换」按钮。选择「公开访问」时,桶内所有文件将通过直接 URL 可被任何人访问;选择「私有访问」时,文件仅可通过签名 URL 或服务端 API 访问。切换后,观察界面上显示的访问 URL 格式变化:公开桶的 URL 为 /storage/v1/object/public/bucket-name/file.jpg,私有桶的 URL 为 /storage/v1/object/sign/bucket-name/file.jpg?token=xxx

第三步:上传文件

点击目标存储桶的「上传文件」区域,选择本地文件或拖拽文件到上传区域。系统会自动验证文件类型和大小是否符合桶的配置要求。上传完成后,文件会出现在桶的文件列表中,显示文件名、大小、上传时间和访问状态。对于公开桶,可直接点击文件名通过 URL 访问;对于私有桶,需要先生成签名 URL。

第四步:生成签名 URL

对于私有存储桶中的文件,点击文件行的「生成签名 URL」按钮。设置 URL 有效期(默认 1 小时),选择访问权限(仅读取或读写)。系统会生成包含加密 token 的临时 URL,该 URL 在有效期内允许指定操作。签名 URL 适合分享给临时需要访问文件的用户,如客户下载报告、同事查看设计稿等场景。

第五步:查看 API 调用示例

点击「API 示例」标签页,选择需要的操作类型(创建桶、上传文件、生成签名 URL 等)。工具会自动生成对应的 JavaScript SDK 代码和 cURL 命令。JavaScript 示例使用 Supabase JS Client,cURL 示例展示原始 HTTP 请求格式。开发者可以直接复制这些代码到项目中,替换自己的 API 密钥和项目 URL 即可使用。

第六步:配置 RLS 策略

对于高级用户,工具提供了 RLS 策略编辑器。通过编写简单的策略表达式,定义不同用户角色的访问权限。例如,设置 auth.uid() = owner_id 策略,确保只有文件所有者才能读取私有文件。策略保存后会立即生效,影响后续的所有文件访问操作。

LocalStorage查看器 - 浏览器存储键值探查

实时查看当前域名下所有localStorage键值对,支持编辑、删除和导出,前端调试利器。

存储读写速度测试 - localStorage vs IndexedDB

对localStorage和IndexedDB的读写操作进行计时,比较两者性能差异。

Resource Timing 缓冲区管理 - 处理大量资源计时

设置资源计时缓冲区大小,监听 resourcetimingbufferfull 事件并处理。

热门

RAML 在线预览器 - API设计文件可视化

编辑RAML定义,实时渲染资源结构、方法及响应示例,适合REST API设计初期。

最新

记忆化(Memoization)函数演示 - 缓存结果对比

对一个耗时函数应用记忆化,展示相同输入下第二次调用速度的提升和缓存命中。

滚动捕捉沙盒 - CSS Scroll Snap实验

调整滚动容器和子项的对齐方式、停止点,观察CSS Scroll Snap平滑滑动效果。

CSS 容器查询实验室 - 基于卡片宽度的响应式布局

拖拽改变容器宽度,观察使用container-type和@container规则的元素如何自适应样式。

进程调度可视化 - FCFS/SJF/轮转对比

输入进程列表,同时对比先来先服务、短作业优先和轮转调度算法的甘特图和平均等待时间。

绘制时机检测 - FP/FCP性能指标展示

通过PerformanceObserver获取首次绘制(FP)和首次内容绘制(FCP)时间。

Open Graph 标签在线调试器 - 富媒体预览模拟

输入URL提取OG标签,模拟Facebook/Twitter/LinkedIn卡片显示效果,优化链接分享。

JWT手动解码器 - 无须库解析Header与Payload

粘贴JWT,自动Base64解码并显示明文Header和Payload。

文件系统访问演示 - File System Access API

使用现代浏览器文件系统访问API打开、编辑并保存本地文件,演示权限流程。

最新

预加载扫描器模拟 - 查看浏览器如何提前发现资源

输入 HTML,模拟浏览器的预加载扫描器,列出将提前请求的资源。

CPU 调度算法模拟器 - FCFS/SJF/Round Robin

添加进程(到达时间、运行时间),并行动画演示先来先服务、短作业优先、轮转等调度算法的执行。

轻量级 API 集合运行器 - 导入 Postman Collection 运行

导入 Postman Collection JSON 文件,按顺序执行请求并显示响应,模拟简单的自动化测试。

最新

Blob URL 创建与预览 - 内存中生成可下载链接

输入文本或拖入文件,生成 Blob URL 并在新标签页预览或触发下载,理解对象 URL 机制。

压缩流API演示 - 实时gzip/brotli压缩

使用CompressionStream和DecompressionStream对文本进行实时的gzip或brotli压缩与解压。

最新

网络信息 API 演示 - 带宽类型与 RTT 查询

展示 navigator.connection 提供的有效连接类型(4g/3g/2g)、下行速度和往返时间。

栈式虚拟机演示 - 后置运算执行

输入后缀表达式或简单指令,逐步演示栈的压入弹出计算过程。

预加载/预获取指南 - 资源提示选择

根据资源类型和加载场景,推荐使用preload、prefetch还是preconnect标签。

Data URI 生成器 - 文件转内联base64

拖放小图片或文本文件,转换为可嵌入HTML/CSS的Data URI,设置MIME类型。

短链接生成器 - 调用第三方 API 缩短网址

输入长 URL,通过 TinyURL 或类似 API 生成短链接,并可复制或生成 QR 码。

Referrer策略检测 - 请求头分析

显示当前网页的Referrer-Policy设置,并模拟不同策略下的Referer发送情况。

图像隐写解码器 - 最低有效位LSB提取

上传疑似隐写图片,提取每个像素的最低位,尝试恢复隐藏的文本或数据。

最新

REST 与 GraphQL 响应格式对比器 - 结构差异可视化

输入同一数据源的两种 API 响应,并排展示结构差异,理解两种风格的数据组织。

Data URI生成器 - 文件/文本转内联URI

将上传的小文件或文本转换为可直接嵌入HTML/CSS的data: URI格式。

资源提示标签生成器 - preconnect/prefetch

输入第三方域名,生成<link rel='preconnect'>或dns-prefetch等资源提示标签。

多样式骨架屏生成器 - 卡片/列表/表格

选择卡片、列表或表格布局,生成对应的灰色闪烁骨架屏HTML/CSS代码。

Data URL解析查看器 - 预览/下载/解构

粘贴以data:开头的链接,自动判断MIME类型并预览内容,或提供下载按钮。

API 密钥泄露检测器 - 扫描代码中的硬编码密钥

粘贴代码片段,通过模式匹配查找可能泄露的 AWS、Google 等 API 密钥和令牌。