浏览器中的不同存储类型有哪些

　　介绍

小编给大家分享一下浏览器中的不同存储类型有哪些,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

在后端开发中,存储是工作的常见部分。应用程序数据存储在数据库中,文件存储在对象存储中,瞬态数据存储在高速缓存中……似乎存在无限种存储任何类型数据的可能性。但是,<强>数据存储不仅限于后端强,前端(浏览器)还具有许多存储数据的选项。我们可以通过利用这种存储方式来提升我们的应用性能,保存用户的偏好,在多个会话,甚至不同的计算机上保持应用状态。

在本文中,我们将通过不同的可能性在浏览器中存储数据。我们将涵盖每种方法的三个用例,以掌握其利弊。最后,你将能够决定什么存储是最适合你的用例。

让我们开始吧!

localStorage API

<代码> localStorage>

令人惊讶的是,谷歌铬团队并不建议使用这个选项,因为它屏蔽了主线程,而且web工人和服务人员无法访问。他们推出了一个实验:KV存储,作为一个更好的版本,但这只是一个试验,似乎还没有任何进展。

<代码> localStorage API可作为<代码>窗口。localStorage> 之前,我们必须确保将其转换为字符串。主要的三个功能是:

    <李> <代码> setItem(& # 39;关键# 39;, <代码> & # 39;价值# 39;) <李> <代码> getItem(& # 39;关键# 39;) <李> <代码> removeItem(& # 39;关键# 39;)

它们都是同步的,因此使用起来很简单,但是它们会阻塞主线程。

值得一提的是,<代码> localStorage> 的双胞胎。唯一的区别是,存储在sessionStorage <代码> 中的数据将仅持续当前会话,但API相同。

这个太简单了,相信大家都用过。

IndexedDB IndexedDB API是浏览器中的现代存储解决方案。它可以存储大量的结构化数据,甚至文件和Blob。和每一个数据库一样,IndexedDB对数据进行索引,以便高效地运行查询。使用IndexedDB比较复杂,我们必须创建一个数据库、表,并使用事务。

与<代码> localStorage> localStorage> localStorage>

让我们来编写代码,前往我们的用户偏好示例吧!

& lt;输入类型=癱heckbox"id=癲arkTheme"name=癲arkTheme">让数据库; 　　 　　功能开关(){ 　　如果(){ 　　document.documentElement.classList.add(& # 39;黑暗# 39;); 　　其他}{ 　　document.documentElement.classList.remove(& # 39;黑暗# 39;); 　　} 　　} 　　 　　异步函数保存(){ 　　const tx=db.transaction(& # 39;偏好# 39;& # 39;读写# 39;); 　　常量存储=tx.objectStore(& # 39;偏好# 39;); 　　商店。把({关键:& # 39;darkTheme& # 39;,价值:alt="浏览器中的不同存储类型有哪些">

<代码> idb 是我们使用的承诺包装器,而不是使用基于事件的低级API。首先要注意的是,对数据库的每次访问都是异步的,这意味着我们不会阻塞主线程,与<代码> localStorage>

我们需要打开与数据库的连接,以便在整个应用程序中都可以使用它进行读写。我们给数据库起一个名字<代码> my-db> 1> preferences> 保存和<代码>

毫无疑问,IndexedDB具有更多的开销,并且与<代码> localStorage> localStorage> & lt; p id=發oading"在加载…& lt;/p> 　　& lt; ul id=發ist"祝辞 　　& lt;/ul>

浏览器中的不同存储类型有哪些