使用JavaScript现代浏览器API更好地进行数据管理

Source 资源

The modern browser JavaScript APIs can help you build amazing web apps that perform better, work offline, and provide better user experiences overall.

现代的浏览器JavaScript API可以帮助您构建出色的Web应用程序，这些应用程序的性能更好，可以离线工作，并可以提供更好的整体用户体验。

There is no website without data, right? it’s the most essential componentin a web application. To display data appropriately in the web app we need to retrieve, manipulate, store, and process various data. With modern browser JavaScript APIs, we can make those tasks easier.

没有没有数据的网站，对吗？ 它是Web应用程序中最重要的组件。 为了在Web应用程序中正确显示数据，我们需要检索，操纵，存储和处理各种数据。 借助现代的浏览器JavaScript API，我们可以使这些任务更加轻松。

When it comes to data we want to improve the data retrieval, storage, get better app performance, and build powerful web pages for our dear users.

在数据方面，我们希望为亲爱的用户改善数据的检索，存储，获得更好的应用程序性能并构建功能强大的网页。

In this article, I’m going to list the best data management JavaScript APIs with examples.

在本文中，我将通过示例列出最佳的数据管理JavaScript API。

提取API (Fetch API)

We usually use XML HTTP request API or Ajax to get data. This has a huge impact on the quality of web applications. Fetch API helps you improve the quality of your HTTP requests and really simplifies coding data requests from remote servers.

我们通常使用XML HTTP请求API或Ajax来获取数据。 这对Web应用程序的质量有巨大影响。 Fetch API可帮助您提高HTTP请求的质量，并真正简化了来自远程服务器的数据请求编码。

💻 工作原理示例： (💻Example of how it works:)

缓存API (Cache API)

We can get necessary data through fetch API but sometimes we need to store them locally. This time we will be using the Cache API for this task. The Cache API makes it easy to take the results of an HTTP request and store it for later use.

我们可以通过提取API获取必要的数据，但有时我们需要将其存储在本地。 这次，我们将使用Cache API来完成此任务。 通过Cache API，可以轻松获取HTTP请求的结果并将其存储以备后用。

💻 工作原理示例： (💻Example of how it works:)

设备内存API (Device Memory API)

This API’s pretty simple. We use a property that is available on the global navigator object named Device Memory. Although its simplicity it provides valuable information that you can use to figure out what the storage capacity of a user's device is and tailor the user experience accordingly to make the most of the resources that the user has.

这个API非常简单。 我们使用名为“设备内存”的全局导航器对象上可用的属性。 尽管它简单易用，但它提供了有价值的信息，您可以使用这些信息来确定用户设备的存储容量是多少，并相应地调整用户体验，以充分利用用户拥有的资源。

💻 工作原理示例： (💻Example of how it works:)

持久存储 (Storage persistent)

How do you know how much storage space is available and how much has already been used? When there is no local memory left for the browser to store and maintain a website’s data, what will happen? Well, the browser will automatically attempt to clear the storage space. I guess that you see what’s the problem here? offline applications won’t be able to work appropriately. This API’s power is telling the browser to do its best to prioritize maintaining a website’s data. So the important data for the offline applications will be prioritized if there is memory pressure and will be cleared the last thing if there is no place for the browser with a permission request.

您如何知道有多少可用存储空间以及已经使用了多少存储空间？ 如果没有足够的本地内存供浏览器存储和维护网站数据，将会发生什么？ 好吧，浏览器将自动尝试清除存储空间。 我想您知道这里有什么问题吗？ 离线应用程序将无法正常工作 。 该API的功能是告诉浏览器尽力确定维护网站数据的优先级。 因此，如果存在内存压力，将优先考虑用于脱机应用程序的重要数据，如果没有权限请求的浏览器没有位置，则将清除最后一件事。

To make this happen we need to mark the storage as persistent and before clearing it, the browser will notify the user and ask for permission to delete those data.

为了做到这一点，我们需要将存储标记为持久性，然后再清除它，浏览器将通知用户并请求删除这些数据的权限。

💻工作方式示例： (💻Example of how it works:)

LocalForage API (LocalForage API)

LocalForage is a simplified way to do what we can do with indexedDB, storing important data in one or multiple databases. It’s a third party library created by Mozilla, you can download and use it easily in your application. With this API you can treat indexedDB as simple storage of key and value.

LocalForage是一种简化的方法，可用于处理indexedDB，将重要数据存储在一个或多个数据库中。 它是Mozilla创建的第三方库，您可以在应用程序中轻松下载并使用它。 使用此API，您可以将indexedDB视为键和值的简单存储。

💡外卖： (💡 Takeouts:)

• To retrieve a sample JSON code quickly use Httpbin.org

  要快速检索示例JSON代码，请使用Httpbin.org

• Fetch is a promise, so it can be used with then and catchas any other promise.

  提取是一个promise ，因此可以与then一起使用，并像其他任何catch一样进行catch 。

• We make sure to useclone() to copy objects so that we are sure that we have copied the actual object and not its reference.

  我们确保使用clone() 复制对象，以确保我们已经复制了实际对象而不是其引用。

• localForage uses javascript promises.

  localForage使用JavaScript的localForage 。

Dear readers, thank you for your support and your precious time. I hope this was useful and helpful for you.

尊敬的读者，感谢您的支持和宝贵的时间。 我希望这对您有帮助。

See you soon (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

很快见(ﾉ◕ヮ◕)ﾉ *：･ ﾟ✧

FAM

FAM

升级编码 (Level Up Coding)

Thanks for being a part of our community! Subscribe to our YouTube channel or join the Skilled.dev coding interview course.

感谢您加入我们的社区！ 订阅我们的YouTube频道或参加Skilled.dev编码面试课程 。

翻译自: https://levelup.gitconnected.com/better-data-management-with-javascript-modern-browsers-apis-8ef0f389bb8d