首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用来自indexedDB的承诺在@ngrx/ initialState中设置核心

indexedDB是一种浏览器内置的客户端数据库,它提供了一种在浏览器中存储和检索结构化数据的方式。@ngrx/initialState是一个用于管理应用程序状态的库,它可以帮助我们在Angular应用中管理和维护应用程序的初始状态。

要使用来自indexedDB的承诺在@ngrx/initialState中设置核心,可以按照以下步骤进行操作:

  1. 首先,确保你的Angular应用已经安装了@ngrx/initialState和indexedDB的相关依赖。
  2. 在应用的根模块中导入和配置@ngrx/initialState。可以使用createInitialStateProvider函数来创建一个提供应用初始状态的提供者。
代码语言:typescript
复制
import { createInitialStateProvider } from '@ngrx/initial-state';

@NgModule({
  providers: [
    createInitialStateProvider({
      getInitialState: () => {
        // 在这里获取indexedDB中的数据并返回作为初始状态
        return new Promise((resolve, reject) => {
          // 使用indexedDB API获取数据
          const request = indexedDB.open('yourDatabaseName');
          request.onsuccess = (event) => {
            const db = event.target.result;
            const transaction = db.transaction('yourStoreName', 'readonly');
            const objectStore = transaction.objectStore('yourStoreName');
            const getRequest = objectStore.get('yourKey');
            getRequest.onsuccess = (event) => {
              const data = event.target.result;
              resolve(data);
            };
            getRequest.onerror = (event) => {
              reject(event.target.error);
            };
          };
          request.onerror = (event) => {
            reject(event.target.error);
          };
        });
      }
    })
  ]
})
export class AppModule { }

在上述代码中,我们使用indexedDB API打开数据库并获取存储对象,然后使用get方法获取指定键的数据。最后,我们将获取的数据作为承诺的解决值返回。

  1. 在应用的根组件中使用@ngrx/initialState提供的initialState注入器来获取初始状态。
代码语言:typescript
复制
import { Component, OnInit } from '@angular/core';
import { initialState } from '@ngrx/initial-state';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <!-- 在这里使用初始状态 -->
    </div>
  `
})
export class AppComponent implements OnInit {
  constructor(private initialState: initialState) { }

  ngOnInit() {
    this.initialState.subscribe((state) => {
      // 在这里使用初始状态
    });
  }
}

在上述代码中,我们通过将initialState注入到AppComponent中来获取初始状态。然后,我们可以在ngOnInit生命周期钩子中订阅初始状态,并在回调函数中使用它。

这样,我们就可以使用来自indexedDB的承诺在@ngrx/initialState中设置核心了。这种方法可以帮助我们在应用程序启动时从indexedDB中获取数据,并将其作为初始状态来管理和维护应用程序的状态。

对于腾讯云相关产品和产品介绍链接地址,可以参考腾讯云官方文档或者咨询腾讯云的客服人员获取更详细的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 一个Angular 5教程:一步一步指导实现你第一个Angular 5应用程序

    其实,我们可以欺骗并使用takeWhile运算符。通过使用它,我们确保我们数据流一旦发生this.alive错误就会停止发布新值,并且我们只需该onDestroy组件函数设置该值。...您可以项目的所有部分使用该文件值,并environment.tsAngular CLI负责提供来自相应项目的内容时将其包含在内environment.your-environment.ts。...State是一个单一,不可变数据结构 - 至少Ngrx为我们实现它方式。Ngrx是由Redux提供灵感“RxJS支持Angular应用程序状态管理库”。 Ngrx灵感来自Redux。...我们可以使用诸如ngrx-store-localstorage之类东西来存储我们数据到浏览器localStore,但是如何使用API​​呢?...与之前一样故事,我们使用扩展运算符打开我们对象和卡阵列,并将其与扩展有效载荷(来自服务器的卡,我们例子)结合起来。

    42.6K10

    任务,微任务,队列和时间表

    事件循环具有多个任务源,这些任务源保证了该源执行顺序(如IndexedDB之类规范定义了它们执行顺序),但是浏览器可以循环每个循环中选择从哪个源执行任务。...这是用于使用微任务进行承诺Edge凭单。WebKit每晚都在做正确事,因此我认为Safari最终会解决此问题,并且它似乎已在Firefox 43得到修复。...此规则来自HTML规范,用于调用回调: 如果脚本设置对象堆栈现在为空,请执行微任务检查点 — HTML:回调步骤3 之后进行清理 …并且微任务检查点涉及遍历微任务队列,除非我们已经处理微任务队列。...我尝试为使用Promise而非怪异IDBRequest对象IndexedDB创建简单包装库时遇到了此问题。...实际上,您可以Firefox解决此问题,因为诸如es6-promise之类承诺填充将突变观察者用于回调,而回调正确地使用了微任务。

    2.2K20

    跨标签页通信8种方式(下)

    使用 IndexedDB 执行操作是异步执行,以免阻塞应用程序。IndexedDB 是浏览器提供一种本地数据库,可以用于多个标签页之间共享数据。...请注意,实际应用,您可能需要更复杂逻辑来处理跨标签页通信,并确保数据同步和一致性。此示例仅提供了一个基本框架来演示如何使用 IndexedDB 实现跨标签页通信。...下面是一个示例:发送消息标签页:// 设置一个 Cookie,将消息存储 Cookie document.cookie = 'message=Hello from sender!'...我们发送消息标签页设置了一个名为 "message" Cookie,并将消息存储在其中。...以上示例提供了一个基本框架来演示如何使用 Cookie 实现跨标签页通信。实际应用,您可能需要更复杂逻辑来处理跨标签页通信,并确保数据同步和一致性。

    38810

    Redux Toolkit

    ,但本着create-react-appand精神apollo-boost,我们可以尝试提供一些工具来抽象设置过程并处理最常见用例,并包含一些有用实用程序,让用户简化他们应用程序代码。...Redux Toolkit 还包括一个强大数据获取和缓存功能,我们称之为“RTK Query”。它作为一组单独入口点包含在包。它是可选,但可以消除您自己手写数据获取逻辑需要。...无论您是设置第一个项目的全新 Redux 用户,还是想要简化现有应用程序经验丰富用户,Redux Toolkit都可以帮助您改进您 Redux 代码。...createAsyncThunk: 接受一个动作类型字符串和一个返回承诺函数,并生成一个pending/fulfilled/rejected基于该承诺分派动作类型 thunk import { createAsyncThunk...reducer 和 selector 来管理 store 规范化数据 重新选择库createSelector实用程序,重新导出以方便使用

    12410

    JavaScript是如何工作:存储引擎+如何选择合适存储API

    正确存储缓存策略是实现离线移动 Web 体验核心构建块,同时也大大提高了用户体验。 本章,讨论可选择存储 Api 和服务,并提供一些构建 Web应用程序,该使用哪种存储引擎。...浏览器数据持久化 现在,有相当多浏览器 Api 用来存储数据。这里将逐一介绍其中一些及它们区别,以便后续我们能够容合理选择使用。 然而,选择如何持久化数据之前,有几件事需要考虑。...它与 localStorage 相似,不同之处在于 localStorage 里面存储数据没有过期时间设置,而存储 sessionStorage 里面的数据页面会话结束时会被清除。...IndexedDB ? IndexedDB 是一种在用户浏览器持久存储数据方法。因为它允许你创建具有丰富查询功能 Web 应用程序,无论网络可用性如何,这些应用程序都可以在线和离线工作。...要存储应用程序状态和用户生成内容,请使用IndexedDB。这使得用户可以更多浏览器离线工作,而不仅仅是那些支持缓存API浏览器。

    1.6K10

    超越 Cookie:当今浏览器端数据存储方案

    之后又有了很多新选择:Web Storage API、IndexedDB 和 Cache API。那么 cookie 死了吗?我们来看看这些浏览器存储数据技术。...Cookie 另一个用途是存储用户语言代码。由于你可能希望大多数请求访问用户语言,因此你可以利用它自动附加。 如何使用 cookies?...前面经讨论了要使用 cookie 原因,现在来看看你可以如何使用 cookie。要从服务器上给客户端设置 cookie,需要在 HTTP 响应添加 Set-Cookie 标头。...总结 浏览器上存储数据每种方法都有其自己用途。如果信息很小,很敏感,并且可能在服务器上使用,那么 cookie 就是最佳选择。...如果要保存更大且更不敏感数据,Web Storage API 可能是更好选择。 如果你打算存储大量结构化数据,IndexedDB 非常棒。Cache API 用于存储来自 HTTP 请求响应。

    1.2K30

    超越Cookie,当今客户端数据存储技术有哪些

    我们来看看这些浏览器存储数据技术。 Cookies Cookie 是由服务器发送或在客户端上设置信息单位,保存在用户本地浏览器上。它们会自动附加到每个请求上。...Cookie 另一个用途是存储用户语言代码。由于你可能希望大多数请求访问用户语言,因此你可以利用它自动附加。 如何使用 cookies?...前面经讨论了要使用 cookie 原因,现在来看看你可以如何使用 cookie。要从服务器上给客户端设置 cookie,需要在 HTTP 响应添加 Set-Cookie 标头。...总结 浏览器上存储数据每种方法都有其自己用途。如果信息很小,很敏感,并且可能在服务器上使用,那么 cookie 就是最佳选择。...如果要保存更大且更不敏感数据,Web Storage API 可能是更好选择。 如果你打算存储大量结构化数据,IndexedDB 非常棒。 Cache API 用于存储来自 HTTP 请求响应。

    3.9K30

    美团开源Logan Web:前端日志在Web端实现

    日志分析平台:提供日志查询与数据可视化展示。 2.3 Logan Web 端面临问题 Web 环境若要实现端上日志存储及上报需要解决三大难点: 如何存储?...需要解决 Web 本地大体积日志流存取。 如何保障日志安全?本地已存储日志需要有数据安全保障。 如何上报?需要有效机制触发日志上报。 2.4 Logan Web 做了什么?...对 IndexedDB API 调用被封装在独立于 logan-web idb-managed 包,该包主要解决使用 IndexedDB 进行本地存储时遇到技术挑战。...(3)IndexedDB 不提供数据时效设置与过期数据清理 IndexedDB 默认数据是持久化落地,尽管它可用容量远大于 LocalStorage,但在像 Logan Web 这样需要随时间不断更新本地数据使用场景下...当对一个新 DB 建立连接时,会将脚本设置 DB 版本及库表信息注册到 DB Manager 并把数据存储下来。

    1.5K20

    从源码理解 React Hook 是如何工作

    今天我们从源码来理解 React Hook 是如何工作。 React Hook 是 React 16.8 后新加入黑魔法,让我们可以 函数组件内保存内部状态。...ContextOnlyDispatcher,防止错误时机使用 Hook。...useState 本质上使用 useReducer, React 源码层提供了特殊名为 basicStateReducer reducer,后面源码解析中会看到它。...这个全局变量会在不同阶段设置为不同对象。render 过程,挂载阶段设置为 HooksDispatcherOnMount,更新阶段设置为 HooksDispatcherOnUpdate。... render 阶段外,会设置为 ContextOnlyDispatcher,这个对象下所有方法都会抛出错误,因为此时不存在正常处理 fiber,使用时机是并不对。

    1.3K20

    【Web技术】630- 前端存储除了 localStorage 还有啥

    保存到 ImmortalDB 数据被冗余地存储 Cookies,IndexedDB 和 localStorage ,并且如果其中任何数据被删除或损坏,它们将不断进行自我修复。...另外,数据客户端之间是同步,因此用户可以随时随地保持最新状态。 PouchDB 也 Node.js 运行,可以用作与 「CouchDB」 兼容服务器直接接口。...通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户登录状态。...Web SQL Database 规范定义三个核心方法: openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象; transaction:这个方法允许我们根据情况控制事务提交或回滚...,不能跨域名访问; 支持事务型:IndexedDB 执行操作会按照事务来分组一个事务,要么所有的操作都成功,要么所有的操作都失败; 键值对存储:IndexedDB 内部采用对象仓库(object

    2.2K30

    深入浅出前端本地储存

    简单来说就是:用户两次 HTTP 请求,服务端并不能通过请求本身,知道这两次请求,来自于同一个用户 比如我们如今司空见惯登录功能, Cookie 被发明之前其实几乎无法实现登录态长久保持 也就是说...,一般不推荐使用 Cookie,大部分情况下使用 Web Storage 是个更好选择 Web Storage 2014 年年底发布 HTML5 标准,新增了一个 Web Storage 本地储存方案...本身设计其实更适合用来浏览器上储存数据 总之,如果不考虑 IndexedDB 操作难度,其作为一个前端本地储存方案其实是接近完美的 简单理解数据库 使用 IndexedDB 前,你首先需要懂基本数据库概念...(不断完善): https://godb-js.github.io/ 总之,GoDB 可以 帮你背后处理好 IndexedDB 各种繁琐操作 帮你背后维护好数据库、数据表和字段 以及字段索引,各种属性...总之,IndexedDB 可以说是最适合用来在前端存数据方案,只不过因为其繁琐操作和一定使用门槛,目前没有更简单 localStorage 使用范围那么广而已 如果你想使用 IndexedDB

    81810

    JavaScript IndexedDB 完整指南

    IndexedDB 用于浏览器存储数据,对于需要离线工作 web 应用程序(如大多数进步 web 应用程序)尤其重要。 首先,让我们介绍一下为什么需要将数据存储 web 浏览器。...数据 web 应用程序无处不在 —— 用户交互创建数据、查找数据、更新数据和删除数据。如果没有存储这些数据方法,就不可能允许用户交互跨多个 web 应用程序使用保持状态。...幸运是,有几种关于如何在浏览器存储数据工具,可以在线和离线访问数据。 1....浏览器存储方式 关于如何在浏览器存储数据,Web 标准提供了三个主要 API: Cookies:此数据存储浏览器,Cookies 大小限制为 4k。...浏览器打开此文件。如果你正在使用 VS Code,可以用像 liveserver 这样扩展。

    1.9K20

    【译】我是如何学习任意前端框架

    下面我们逐步了解下: 组件 任何框架核心都是以创建组件来达到复用目的。...1.查找 & 显示 (模仿) 常用首个应用是使用其公共API来模仿任何已知站点,尝试构建一个带下拉列表搜索栏,来保存来自端点API结果,检查其返回数据,然后再显示它,就像有张图像一样(显示)或不显示...,例如,一旦用户点击进入,就向端点API获取结果数据 学会如何展示单条数据或一组数据 给你插入数据添加点样式 构建你布局 主要详细信息:列表结果将结果每个项目的链接添加到项目详细页面 了解如何将数据从母版页传递到详细信息页...尝试为后端框架添加auth功能 4.聊天应用 在前面的章节,对后端所有请求都是单向,你管理应用程序状态时没有问题。...你将学到: 学习如何使用管理状态解决方案,如redux for react, ngrx for angular 2+ 或 vuex for vuejs以及如何将其与客户端应用程序集成 使你应用更灵活

    3.6K10

    JavaScript IndexedDB 完整指南

    IndexedDB 用于浏览器存储数据,对于需要离线工作 web 应用程序(如大多数进步 web 应用程序)尤其重要。 首先,让我们介绍一下为什么需要将数据存储 web 浏览器。...数据 web 应用程序无处不在——用户交互创建数据、查找数据、更新数据和删除数据。如果没有存储这些数据方法,就不可能允许用户交互跨多个 web 应用程序使用保持状态。...幸运是,有几种关于如何在浏览器存储数据工具,可以在线和离线访问数据。 1....浏览器存储方式 关于如何在浏览器存储数据,Web 标准提供了三个主要 API: Cookies:此数据存储浏览器,Cookies 大小限制为 4k。...浏览器打开此文件。如果你正在使用 VS Code,可以用像 liveserver 这样扩展。

    1.8K10

    前端存储除了 localStorage 还有啥

    保存到 ImmortalDB 数据被冗余地存储 Cookies,IndexedDB 和 localStorage ,并且如果其中任何数据被删除或损坏,它们将不断进行自我修复。...另外,数据客户端之间是同步,因此用户可以随时随地保持最新状态。 PouchDB 也 Node.js 运行,可以用作与 「CouchDB」 兼容服务器直接接口。...通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户登录状态。...Web SQL Database 规范定义三个核心方法: openDatabase:这个方法使用现有数据库或新建数据库来创建数据库对象; transaction:这个方法允许我们根据情况控制事务提交或回滚...,不能跨域名访问; 支持事务型:IndexedDB 执行操作会按照事务来分组一个事务,要么所有的操作都成功,要么所有的操作都失败; 键值对存储:IndexedDB 内部采用对象仓库(object

    2.4K30
    领券