https://blog.louishhy.com/tags/web-api/ Recent content in Web Api on Louis's blog Hugo -- gohugo.io en-us Louis Huang Thu, 22 May 2025 02:48:59 +0000 https://blog.louishhy.com/post/about-client-web-api/ Thu, 22 May 2025 02:48:59 +0000 https://blog.louishhy.com/post/about-client-web-api/ <p>看到了Hono.JS的介绍， 其中有一个部分是它可以 run everywhere，因为其使用了Web API Standard。</p> <p>正好自己之前对这些Web API一知半解，所以简单复习了一部分。</p> <h2 id="dom--bom-manipulation">DOM / BOM Manipulation </h2><p>主要是利用了<code>document</code>、<code>window</code>等对象来操作DOM和BOM。</p> <ul> <li><code>document</code>：提供操作文档的方法。例如<code>querySelector</code>、<code>getElementById</code>等。通过这种script可以让网页动态化等等。</li> <li><code>window</code>：表示浏览器窗口的对象，可以知道比如说窗口的dimension，也可以操作例如滚动窗口到哪些地方。一些event handler也是直接绑在window上。 <ul> <li>也因此复习了一下可以监听的events，例如<code>scroll</code>。使用<code>addEventListener</code>可以绑定事件处理函数，<code>removeEventListener</code>可以解绑事件处理函数避免内存泄漏。</li> </ul> </li> <li><code>history</code>：表示浏览器的历史记录，可以用来操作浏览器的前进后退等功能。</li> </ul> <h2 id="fetch-api">Fetch API </h2><p>应该是后端接触最多的一种API了。 <code>Request</code>和<code>Response</code>是两个最重要的对象。</p> <p>二者基本上都可以调用类似的方法来进行解析。</p> <ul> <li><code>.formData()</code>：将数据解析为<code>FormData</code>对象，文件也会被自动解析为<code>File</code>对象。</li> <li><code>.json()</code>：将JSON数据解析为JavaScript对象。</li> <li><code>.text()</code>：将文本数据解析为字符串。</li> <li><code>.arrayBuffer()</code>：将数据解析为<code>ArrayBuffer</code>对象。（可以用来直接处理二进制数据）</li> </ul> <p>除此之外<code>Response</code>还有<code>.ok</code>、<code>.status</code>、<code>.statusText</code>等属性可以用来判断请求是否成功。</p> <p>另外一般地，如果没有特殊需求的情况下，基本上API endpoint都是用<code>json</code>或<code>multipart/form-data</code>来传输数据，比较少直接传输二进制数据或者单纯的text。</p> <h2 id="local-storage-和-session-storage">Local Storage 和 Session Storage </h2><p>存储在浏览器中的key-value pair，每一个origin都有自己的独立存储空间。 不同的是：</p> <ul> <li><code>localStorage</code>：存储的数据在浏览器关闭后仍然存在，除非被purge。多个同origin的tab之间是共享的。</li> <li><code>sessionStorage</code>：存储的数据在浏览器关闭或标签页关闭后会被删除。按照标签页隔离。</li> </ul>