NGXS及NGRX store数据存储方式、内存限制与浏览器存储位置咨询

一、NGXS Store相关问题 #

• 存储方式：NGXS是面向Angular的RxJS友好型状态管理库，所有状态以不可变JavaScript对象树的形式维护在单例服务实例中，每次状态变更都通过Action触发对应的操作生成全新的状态对象，不会直接修改原有状态，保证状态变更的可预测性。
• 内存限制：NGXS本身没有内置任何存储容量限制，实际可用上限完全取决于当前浏览器为标签页分配的JavaScript堆内存大小，常规桌面端浏览器单标签页可用堆内存从数百MB到数GB不等，当状态总大小超出分配上限时会触发页面OOM崩溃。
• 浏览器存储位置：默认仅存储在当前会话的JavaScript运行时堆内存中，属于临时存储，页面刷新、关闭标签页后数据会全部清除，不会自动写入LocalStorage、IndexedDB等持久化存储层，如有持久化需求需自行对接相关插件实现。

二、NGRX Store相关问题 #

• 存储方式：NGRX是基于Redux规范实现的Angular原生状态管理方案，状态同样以不可变纯对象树的形式由全局单例服务维护，所有状态修改必须经过Reducer纯函数处理，每次更新返回新的状态树引用，避免副作用污染状态。
• 存储上限：NGRX官方未给出明确的存储上限值，实际可用上限和NGXS一致，受限于浏览器的JS堆内存分配策略，从性能角度出发通常不建议在单个Store中存储超过100MB的序列化后数据，过大会导致状态变更、选择器计算的延迟显著升高。
• 存储位置：默认存储在当前页面的JS运行时堆内存中，属于会话级临时存储，页面刷新即丢失，开发环境下的devtools工具存储的状态快照仅用于调试，不会影响生产环境的存储逻辑，需要持久化时需自行引入持久化中间件处理。

内容的提问来源于stack exchange，提问作者Shijin Sidharth