CN115292625B - 单页面应用持久化状态管理方法、装置、计算机设备及存储介质 - Google Patents
单页面应用持久化状态管理方法、装置、计算机设备及存储介质 Download PDFInfo
- Publication number
- CN115292625B CN115292625B CN202210731971.8A CN202210731971A CN115292625B CN 115292625 B CN115292625 B CN 115292625B CN 202210731971 A CN202210731971 A CN 202210731971A CN 115292625 B CN115292625 B CN 115292625B
- Authority
- CN
- China
- Prior art keywords
- page
- state
- ram
- reading
- storage
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000007726 management method Methods 0.000 title claims abstract description 59
- 230000002688 persistence Effects 0.000 title claims abstract description 36
- 238000000034 method Methods 0.000 claims abstract description 26
- 238000004590 computer program Methods 0.000 claims description 21
- 230000002085 persistent effect Effects 0.000 claims description 6
- 238000009877 rendering Methods 0.000 abstract description 8
- 230000004807 localization Effects 0.000 abstract description 6
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 3
- 238000009434 installation Methods 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 2
- 230000008859 change Effects 0.000 description 2
- 230000001419 dependent effect Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 235000019800 disodium phosphate Nutrition 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000002955 isolation Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明实施例公开了单页面应用持久化状态管理方法、装置、计算机设备及存储介质。所述方法包括：将应用程序的页面状态存储至sessionStorage中；利用页面路由将页面数据隔离区分；将应用程序的页面状态存储至RAM中；获取页面状态时判断所述RAM中的页面状态是否丢失；若否，则读取所述RAM内的页面状态，以得到读取结果；输出所述读取结果；若是，则读取所述sessionStorage内的页面状态，以得到读取结果，并执行所述输出所述读取结果。通过实施本发明实施例的方法可实现切换页面时确保单页面web应用程序的状态本地化存储和离线访问，保证对用户返回操作、二次渲染的体验感，避免在页面间的数据共享的场景下存在不确定因素。
Description
技术领域
本发明涉及web单单页面应用持久化状态管理方法，更具体地说是指单页面应用持久化状态管理方法、装置、计算机设备及存储介质。
背景技术
目前web前端项目由单页面应用和virtural-dom的方式实现，namepath的切换并不触发服务器资源请求，而是javascript根据namepath的变化更改渲染内容。不同页面间数据共享需求迫切、namepath变化后页面数据持久保存问题突出。
在单页面应用项目中，切换namepath后会销毁当前页面数据，从而加载新的页面数据，当页面用户重新返回之前namepath后，并不能看到之前的页面状态；而业界的状态管理策略是将页面状态存储在RAM(随机存取存储器，Random Access Memory)中，在单页面应用下切换页面后需要从内存中读取数据，一旦用户在浏览网页过程中存在刷新行为，则所有浏览网站所产生的数据会全部丢失，造成不好的使用体验和资源请求的浪费。
综上所述，上述的两种问题均会导致单页面web应用程序的状态本地化存储和离线访问无法实现，对用户返回操作、二次渲染造成不好的体验，在页面间的数据共享的场景下存在不确定因素。
因此，有必要设计一种新的方法，实现切换页面时确保单页面web应用程序的状态本地化存储和离线访问，保证对用户返回操作、二次渲染的体验感，避免在页面间的数据共享的场景下存在不确定因素。
发明内容
本发明的目的在于克服现有技术的缺陷，提供单页面应用持久化状态管理方法、装置、计算机设备及存储介质。
为实现上述目的，本发明采用以下技术方案：单页面应用持久化状态管理方法，包括：
将应用程序的页面状态存储至sessionStorage中；
利用页面路由将页面数据隔离区分；
将应用程序的页面状态存储至RAM中；
获取页面状态时判断所述RAM中的页面状态是否丢失；
若所述RAM中的页面状态未丢失，则读取所述RAM内的页面状态，以得到读取结果；
输出所述读取结果；
若所述RAM中的页面状态丢失，则读取所述sessionStorage内的页面状态，以得到读取结果，并执行所述输出所述读取结果。
其进一步技术方案为：所述将应用程序的页面状态存储至sessionStorage中，包括：
通过页面的生命周期，将页面不同生命阶段的状态实时存储在sessionStorage中，并绑定生命周期，备份当前状态；
将namepath作为根存储空间，对同一个namepath下的所有页面状态分配同一块存储空间。
其进一步技术方案为：所述利用页面路由将页面数据隔离区分，包括：
同一个namepath下不同页面状态根据自定义的namespace分配不同存储空间；
利用react-use的setState良好的扩展性针对namespace及树状存储结构和状态管理架构进行状态管理。
其进一步技术方案为：所述读取所述RAM内的页面状态，以得到读取结果，包括：
利用getStorage接口读取所述RAM内的页面状态，以得到读取结果。
其进一步技术方案为：所述读取所述sessionStorage内的页面状态，以得到读取结果，包括：
利用getStorage接口读取所述sessionStorage内的页面状态，以得到读取结果。
其进一步技术方案为：所述获取页面状态时判断所述RAM中的页面状态是否丢失，包括：
获取页面状态时判断是否执行了页面刷新操作；
若执行了页面刷新操作，则确定所述RAM中的页面状态丢失；
若未执行了页面刷新操作，则确定所述RAM中的页面状态未丢失。
本发明还提供了单页面应用持久化状态管理装置，包括：
第一存储单元，用于将应用程序的页面状态存储至sessionStorage中；
区分单元，用于利用页面路由将页面数据隔离区分；
第二存储单元，用于将应用程序的页面状态存储至RAM中；
判断单元，用于获取页面状态时判断所述RAM中的页面状态是否丢失；
第一读取单元，用于若所述RAM中的页面状态未丢失，则读取所述RAM内的页面状态，以得到读取结果；
输出单元，用于输出所述读取结果；
第二读取单元，用于若所述RAM中的页面状态丢失，则读取所述sessionStorage内的页面状态，以得到读取结果，并执行所述输出所述读取结果。
其进一步技术方案为：所述第一存储单元包括：
状态存储子单元，用于通过页面的生命周期，将页面不同生命阶段的状态实时存储在sessionStorage中，并绑定生命周期，备份当前状态；
分配子单元，用于将namepath作为根存储空间，对同一个namepath下的所有页面状态分配同一块存储空间。
本发明还提供了一种计算机设备，所述计算机设备包括存储器及处理器，所述存储器上存储有计算机程序，所述处理器执行所述计算机程序时实现上述的方法。
本发明还提供了一种存储介质，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述的方法。
本发明与现有技术相比的有益效果是：本发明通过将页面状态存储在sessionStorage以及RAM中，并在namepath之下利用自定义的namespace再做更小粒度的存储和区分，同时嫁接react-use的扩展性和状态管理能力，获取页面状态时先从RAM中获取，当刷新页面时，从sessionStorage读取页面状态，实现切换页面时确保单页面web应用程序的状态本地化存储和离线访问，保证对用户返回操作、二次渲染的体验感，避免在页面间的数据共享的场景下存在不确定因素。
下面结合附图和具体实施例对本发明作进一步描述。
附图说明
为了更清楚地说明本发明实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例提供的单页面应用持久化状态管理方法的应用场景示意图；
图2为本发明实施例提供的单页面应用持久化状态管理方法的流程示意图；
图3为本发明实施例提供的单页面应用持久化状态管理方法的子流程示意图；
图4为本发明实施例提供的单页面应用持久化状态管理方法的子流程示意图；
图5为本发明实施例提供的单页面应用持久化状态管理方法的子流程示意图；
图6为本发明实施例提供的单页面应用持久化状态管理方法的单页面应用示意图；
图7为本发明实施例提供的单页面应用持久化状态管理方法的存储示意图；
图8为本发明实施例提供的单页面应用持久化状态管理装置的示意性框图；
图9为本发明实施例提供的单页面应用持久化状态管理装置的第一存储单元的示意性框图；
图10为本发明实施例提供的单页面应用持久化状态管理装置的区分单元的示意性框图；
图11为本发明实施例提供的单页面应用持久化状态管理装置的判断单元的示意性框图；
图12为本发明实施例提供的计算机设备的示意性框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
应当理解，当在本说明书和所附权利要求书中使用时，术语“包括”和“包含”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。
还应当理解，在此本发明说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本发明。如在本发明说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。
还应当进一步理解，在本发明说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
请参阅图1和图2，图1为本发明实施例提供的单页面应用持久化状态管理方法的应用场景示意图。图2为本发明实施例提供的单页面应用持久化状态管理方法的示意性流程图。该单页面应用持久化状态管理方法应用于服务器中。该服务器与终端进行数据交互，通过将应用程序的页面状态存储在sessionStorage以及RAM中，结合在namepath之下利用自定义的namespace再做更小粒度的存储和区分，同时嫁接react-use的扩展性和状态管理能力，实现切换页面时确保单页面web应用程序的状态本地化存储和离线访问，保证对用户返回操作、二次渲染的体验感，避免在页面间的数据共享的场景下存在不确定因素。
图2是本发明实施例提供的单页面应用持久化状态管理方法的流程示意图。如图2所示，该方法包括以下步骤S110至S170。
S110、将应用程序的页面状态存储至sessionStorage中。
在本实施例中，在单页面app场景下，利用硬盘协同内存实时存储页面数据从而实现状态记忆、数据缓存、带来多页面体验的状态管理。
在一实施例中，请参阅图3，上述的步骤S110可包括步骤S111～S112。
S111、通过页面的生命周期，将页面不同生命阶段的状态实时存储在sessionStorage中，并绑定生命周期，备份当前状态；
S112、将namepath作为根存储空间，对同一个namepath下的所有页面状态分配同一块存储空间。
具体地，根据页面生命周期实时将当前页面状态存储在sessionStorage中，只存储实时页面的状态，将namepath作为根存储空间。
S120、利用页面路由将页面数据隔离区分；
在一实施例中，请参阅图4，上述的步骤S120可包括步骤S121～S122。
S121、同一个namepath下不同页面状态根据自定义的namespace分配不同存储空间；
S122、利用react-use的setState良好的扩展性针对namespace及树状存储结构和状态管理架构进行状态管理。
把app所有页面状态数据同一存储到sessionStorage中，同时利用页面路由将页面数据隔离区分，从而实现整个app的数据共享和缓存；页面数据通过当前路由下唯一的namespace实现不同模块、不同组件的分类存储。
具体地，同一个namepath下不同状态根据namespace分配不同存储空间，利用react-use的setState良好的扩展性针对namespace及其以下更小的粒度做状态管理，从而实现不同页面、不同组件的状态隔离。
一次实例化引用对外部暴露一个state，该state是继承自react-use的setState,从而有和setState用样的扩展性和可维护性；但它是个存在本地sessionStorage的状态，不会随着路由更改而丢失；同时，它的使用方式和setState完全一致。通过setState拿到的状态是当前namepath下所定义的namespace下所有的状态。
在本实施例中，react-use实时的绑定生命周期的存储和更新策略，包含本地化存储和实时更新使用。
根据定义的namespace和当前的namepath树状存储结构和状态管理架构；同时具备setState的更小粒度的扩展性。
S130、将应用程序的页面状态存储至RAM中。
在本实施例中，请参阅图6至图7，考虑到IO读取较高延迟和存储体积限制，写入缓存数据的同时，也在RAM中保存一份数据。在sessionStorage中备份状态的同时，同样在RAM中备份一份，优先级为：RAM>sessionStorage，保证数据输出的性能。
具体地，在把状态存储到sessionStorage时，会把相同的数据在RAM中存储一份，RAM中保存的状态和sessionStorage中保存的状态完全一致。
S140、获取页面状态时判断所述RAM中的页面状态是否丢失。
在本实施例中，一旦出现页面获取历史状态的场景，程序会优先读取RAM中实时保存的状态，如果用户执行了刷新操作，造成内存中数据丢失，则程序会读取sessionStorage中存储的数据。实现了状态缓存、状态管理、状态共享和高性能的app级别体验。
在一实施例中，请参阅图5，上述的步骤S140可包括步骤S141～S143。
S141、获取页面状态时判断是否执行了页面刷新操作；
S142、若执行了页面刷新操作，则确定所述RAM中的页面状态丢失；
S143、若未执行了页面刷新操作，则确定所述RAM中的页面状态未丢失。
S150、若所述RAM中的页面状态未丢失，则读取所述RAM内的页面状态，以得到读取结果。
在本实施例中，读取结果是指所要读取的页面状态。
具体地，利用getStorage接口读取所述RAM内的页面状态，以得到读取结果。
S160、输出所述读取结果；
在获取状态时，会优先获取RAM中的数据，优先级RAM>sessionStorage，从而提升了性能，输出的状态承自react-use的setState,但它是个存在本地sessionStorage的状态，不会随着路由更改而丢失，具有setState的一切优点，且兼具存储在RAM和sessionStorage的优点。
S170、若所述RAM中的页面状态丢失，则读取所述sessionStorage内的页面状态，以得到读取结果，并执行所述步骤S150。
在本实施例中，利用getStorage接口读取所述sessionStorage内的页面状态，以得到读取结果。
利用sessionStorage的数据共享能力实现对外暴露getStorage接口，根据namepath和namespace获取不同页面的数据。
因为sessionStorage具有同host下跨页面数据共享能力，所以这个策略也天然具有不同页面的数据共享能力。该策略提供一个称作getStorage的接口，由于在存储状态时根据namepath和namespace分门别类存储，则getStorage可根据传入的namepath和namespace轻松查询到其他页面的数据，从而实现同app下不同页面的数据共享。
本实施例提供一个getStorage接口随时从RAM或sessionStroage中获取状态，getStorage根据传入的namepath和namespace查询到其他页面的数据，从而实现同app下不同页面的数据共享。页面切换时，可获取到对应的页面状态，页面状态数据不会丢失，确保单页面web应用程序的状态本地化存储和离线访问，保证对用户返回操作、二次渲染的体验感，避免在页面间的数据共享的场景下存在不确定因素。
在本实施例中，使用该方法之前，需要进行对应文件的安装，第一部分宿主环境包，包括node.js、chrome、create-react-app；第二部分是插件依赖包，包括react-use；下载node.js、chrome安装包后按照正常流程安装；打开电脑终端，执行命令npx create-react-app single-app–template；安装完成后执行命令：cd single-app，执行命令yarnadd react-use,react-use为该策略依赖包；打开根目录下的src文件夹，放入该策略的实施脚本storeState.ts；打开文件src/App.tsx文件，删除冗余代码，引入策略暴露的接口，写入页面代码：在终端运行命令：npm start命令；点击第一个按钮，发现页面次数的记录发生变化，即使刷新页面次数依然保持刷新前的状态；点击“查看当前数据”按钮，打开控制台查看数据，拿到的仍然是页面刷新前的数据，实现了数据共享和记忆功能。
上述的单页面应用持久化状态管理方法，通过将页面状态存储在sessionStorage以及RAM中，并在namepath之下利用自定义的namespace再做更小粒度的存储和区分，同时嫁接react-use的扩展性和状态管理能力，获取页面状态时先从RAM中获取，当刷新页面时，从sessionStorage读取页面状态，实现切换页面时确保单页面web应用程序的状态本地化存储和离线访问，保证对用户返回操作、二次渲染的体验感，避免在页面间的数据共享的场景下存在不确定因素。
图8是本发明实施例提供的一种单页面应用持久化状态管理装置300的示意性框图。如图8所示，对应于以上单页面应用持久化状态管理方法，本发明还提供一种单页面应用持久化状态管理装置300。该单页面应用持久化状态管理装置300包括用于执行上述单页面应用持久化状态管理方法的单元，该装置可以被配置于服务器中。具体地，请参阅图8，该单页面应用持久化状态管理装置300包括第一存储单元301、区分单元302、第二存储单元303、判断单元304、第一读取单元305、输出单元306以及第二读取单元307。
第一存储单元301，用于将应用程序的页面状态存储至sessionStorage中；区分单元302，用于利用页面路由将页面数据隔离区分；第二存储单元303，用于将应用程序的页面状态存储至RAM中；判断单元304，用于获取页面状态时判断所述RAM中的页面状态是否丢失；第一读取单元305，用于若所述RAM中的页面状态未丢失，则读取所述RAM内的页面状态，以得到读取结果；输出单元306，用于输出所述读取结果；第二读取单元307，用于若所述RAM中的页面状态丢失，则读取所述sessionStorage内的页面状态，以得到读取结果，并执行所述输出所述读取结果。
在一实施例中，如图9所示，所述第一存储单元301包括状态存储子单元3011以及分配子单元3012。
状态存储子单元3011，用于通过页面的生命周期，将页面不同生命阶段的状态实时存储在sessionStorage中，并绑定生命周期，备份当前状态；分配子单元3012，用于将namepath作为根存储空间，对同一个namepath下的所有页面状态分配同一块存储空间。
在一实施例中，如图10所示，所述区分单元302包括空间处理子单元3021以及管理子单元3022。
空间处理子单元3021，用于同一个namepath下不同页面状态根据自定义的namespace分配不同存储空间；管理子单元3022，用于利用react-use的setState良好的扩展性针对namespace及树状存储结构和状态管理架构进行状态管理。
在一实施例中，所述第一读取单元305，用于利用getStorage接口读取所述RAM内的页面状态，以得到读取结果。
在一实施例中，所述第二读取单元307，用于利用getStorage接口读取所述sessionStorage内的页面状态，以得到读取结果。
在一实施例中，如图11所示，所述判断单元304包括操作判断子单元3041、第一确定子单元3042以及第二确定子单元3043。
操作判断子单元3041，用于获取页面状态时判断是否执行了页面刷新操作；第一确定子单元3042，用于若执行了页面刷新操作，则确定所述RAM中的页面状态丢失；第二确定子单元3043，用于若未执行了页面刷新操作，则确定所述RAM中的页面状态未丢失。
需要说明的是，所属领域的技术人员可以清楚地了解到，上述单页面应用持久化状态管理装置300和各单元的具体实现过程，可以参考前述方法实施例中的相应描述，为了描述的方便和简洁，在此不再赘述。
上述单页面应用持久化状态管理装置300可以实现为一种计算机程序的形式，该计算机程序可以在如图12所示的计算机设备上运行。
请参阅图12，图12是本申请实施例提供的一种计算机设备的示意性框图。该计算机设备500可以是服务器，其中，服务器可以是独立的服务器，也可以是多个服务器组成的服务器集群。
参阅图12，该计算机设备500包括通过系统总线501连接的处理器502、存储器和网络接口505，其中，存储器可以包括非易失性存储介质503和内存储器504。
该非易失性存储介质503可存储操作系统5031和计算机程序5032。该计算机程序5032包括程序指令，该程序指令被执行时，可使得处理器502执行一种单页面应用持久化状态管理方法。
该处理器502用于提供计算和控制能力，以支撑整个计算机设备500的运行。
该内存储器504为非易失性存储介质503中的计算机程序5032的运行提供环境，该计算机程序5032被处理器502执行时，可使得处理器502执行一种单页面应用持久化状态管理方法。
该网络接口505用于与其它设备进行网络通信。本领域技术人员可以理解，图12中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备500的限定，具体的计算机设备500可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
其中，所述处理器502用于运行存储在存储器中的计算机程序5032，以实现如下步骤：
将应用程序的页面状态存储至sessionStorage中；利用页面路由将页面数据隔离区分；将应用程序的页面状态存储至RAM中；获取页面状态时判断所述RAM中的页面状态是否丢失；若所述RAM中的页面状态未丢失，则读取所述RAM内的页面状态，以得到读取结果；输出所述读取结果；若所述RAM中的页面状态丢失，则读取所述sessionStorage内的页面状态，以得到读取结果，并执行所述输出所述读取结果。
在一实施例中，处理器502在实现所述将应用程序的页面状态存储至sessionStorage中步骤时，具体实现如下步骤：
通过页面的生命周期，将页面不同生命阶段的状态实时存储在sessionStorage中，并绑定生命周期，备份当前状态；将namepath作为根存储空间，对同一个namepath下的所有页面状态分配同一块存储空间。
在一实施例中，处理器502在实现所述利用页面路由将页面数据隔离区分步骤时，具体实现如下步骤：
同一个namepath下不同页面状态根据自定义的namespace分配不同存储空间；利用react-use的setState良好的扩展性针对namespace及树状存储结构和状态管理架构进行状态管理。
在一实施例中，处理器502在实现所述读取所述RAM内的页面状态，以得到读取结果步骤时，具体实现如下步骤：
利用getStorage接口读取所述RAM内的页面状态，以得到读取结果。
在一实施例中，处理器502在实现所述读取所述sessionStorage内的页面状态，以得到读取结果步骤时，具体实现如下步骤：
利用getStorage接口读取所述sessionStorage内的页面状态，以得到读取结果。
在一实施例中，处理器502在实现所述获取页面状态时判断所述RAM中的页面状态是否丢失步骤时，具体实现如下步骤：
获取页面状态时判断是否执行了页面刷新操作；若执行了页面刷新操作，则确定所述RAM中的页面状态丢失；若未执行了页面刷新操作，则确定所述RAM中的页面状态未丢失。
应当理解，在本申请实施例中，处理器502可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器502还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
本领域普通技术人员可以理解的是实现上述实施例的方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成。该计算机程序包括程序指令，计算机程序可存储于一存储介质中，该存储介质为计算机可读存储介质。该程序指令被该计算机系统中的至少一个处理器执行，以实现上述方法的实施例的流程步骤。
因此，本发明还提供一种存储介质。该存储介质可以为计算机可读存储介质。该存储介质存储有计算机程序，其中该计算机程序被处理器执行时使处理器执行如下步骤：
将应用程序的页面状态存储至sessionStorage中；利用页面路由将页面数据隔离区分；将应用程序的页面状态存储至RAM中；获取页面状态时判断所述RAM中的页面状态是否丢失；若所述RAM中的页面状态未丢失，则读取所述RAM内的页面状态，以得到读取结果；输出所述读取结果；若所述RAM中的页面状态丢失，则读取所述sessionStorage内的页面状态，以得到读取结果，并执行所述输出所述读取结果。
在一实施例中，所述处理器在执行所述计算机程序而实现所述将应用程序的页面状态存储至sessionStorage中步骤时，具体实现如下步骤：
通过页面的生命周期，将页面不同生命阶段的状态实时存储在sessionStorage中，并绑定生命周期，备份当前状态；将namepath作为根存储空间，对同一个namepath下的所有页面状态分配同一块存储空间。
在一实施例中，所述处理器在执行所述计算机程序而实现所述利用页面路由将页面数据隔离区分步骤时，具体实现如下步骤：
同一个namepath下不同页面状态根据自定义的namespace分配不同存储空间；利用react-use的setState良好的扩展性针对namespace及树状存储结构和状态管理架构进行状态管理。
在一实施例中，所述处理器在执行所述计算机程序而实现所述读取所述RAM内的页面状态，以得到读取结果步骤时，具体实现如下步骤：
利用getStorage接口读取所述RAM内的页面状态，以得到读取结果。
在一实施例中，所述处理器在执行所述计算机程序而实现所述读取所述sessionStorage内的页面状态，以得到读取结果步骤时，具体实现如下步骤：
利用getStorage接口读取所述sessionStorage内的页面状态，以得到读取结果。
在一实施例中，所述处理器在执行所述计算机程序而实现所述获取页面状态时判断所述RAM中的页面状态是否丢失步骤时，具体实现如下步骤：
获取页面状态时判断是否执行了页面刷新操作；若执行了页面刷新操作，则确定所述RAM中的页面状态丢失；若未执行了页面刷新操作，则确定所述RAM中的页面状态未丢失。
所述存储介质可以是U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、磁碟或者光盘等各种可以存储程序代码的计算机可读存储介质。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的。例如，各个单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。
本发明实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。本发明实施例装置中的单元可以根据实际需要进行合并、划分和删减。另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。
该集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。
Claims (7)
1.单页面应用持久化状态管理方法，其特征在于，包括：
将应用程序的页面状态存储至sessionStorage中；
利用页面路由将页面数据隔离区分；
将应用程序的页面状态存储至RAM中；
获取页面状态时判断所述RAM中的页面状态是否丢失；
若所述RAM中的页面状态未丢失，则读取所述RAM内的页面状态，以得到读取结果；
输出所述读取结果；
若所述RAM中的页面状态丢失，则读取所述sessionStorage内的页面状态，以得到读取结果，并执行所述输出所述读取结果；
所述将应用程序的页面状态存储至sessionStorage中，包括：
通过页面的生命周期，将页面不同生命阶段的状态实时存储在sessionStorage中，并绑定生命周期，备份当前状态；
将namepath作为根存储空间，对同一个namepath下的所有页面状态分配同一块存储空间；
所述利用页面路由将页面数据隔离区分，包括：
同一个namepath下不同页面状态根据自定义的namespace分配不同存储空间；
利用react-use的setState良好的扩展性针对namespace及树状存储结构和状态管理架构进行状态管理；react-use实时的绑定生命周期的存储和更新策略，包含本地化存储和实时更新使用。
2.根据权利要求1所述的单页面应用持久化状态管理方法，其特征在于，所述读取所述RAM内的页面状态，以得到读取结果，包括：
利用getStorage接口读取所述RAM内的页面状态，以得到读取结果。
3.根据权利要求1所述的单页面应用持久化状态管理方法，其特征在于，所述读取所述sessionStorage内的页面状态，以得到读取结果，包括：
利用getStorage接口读取所述sessionStorage内的页面状态，以得到读取结果。
4.根据权利要求1所述的单页面应用持久化状态管理方法，其特征在于，所述获取页面状态时判断所述RAM中的页面状态是否丢失，包括：
获取页面状态时判断是否执行了页面刷新操作；
若执行了页面刷新操作，则确定所述RAM中的页面状态丢失；
若未执行了页面刷新操作，则确定所述RAM中的页面状态未丢失。
5.单页面应用持久化状态管理装置，其特征在于，包括：
第一存储单元，用于将应用程序的页面状态存储至sessionStorage中；所述第一存储单元包括状态存储子单元以及分配子单元；
状态存储子单元，用于通过页面的生命周期，将页面不同生命阶段的状态实时存储在sessionStorage中，并绑定生命周期，备份当前状态；分配子单元，用于将namepath作为根存储空间，对同一个namepath下的所有页面状态分配同一块存储空间；
区分单元，用于利用页面路由将页面数据隔离区分；
第二存储单元，用于将应用程序的页面状态存储至RAM中；
判断单元，用于获取页面状态时判断所述RAM中的页面状态是否丢失；
第一读取单元，用于若所述RAM中的页面状态未丢失，则读取所述RAM内的页面状态，以得到读取结果；
输出单元，用于输出所述读取结果；
第二读取单元，用于若所述RAM中的页面状态丢失，则读取所述sessionStorage内的页面状态，以得到读取结果，并执行所述输出所述读取结果；
所述区分单元包括空间处理子单元以及管理子单元；
空间处理子单元，用于同一个namepath下不同页面状态根据自定义的namespace分配不同存储空间；管理子单元，用于利用react-use的setState良好的扩展性针对namespace及树状存储结构和状态管理架构进行状态管理；react-use实时的绑定生命周期的存储和更新策略，包含本地化存储和实时更新使用。
6.一种计算机设备，其特征在于，所述计算机设备包括存储器及处理器，所述存储器上存储有计算机程序，所述处理器执行所述计算机程序时实现如权利要求1至4中任一项所述的方法。
7.一种存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至4中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210731971.8A CN115292625B (zh) | 2022-06-26 | 2022-06-26 | 单页面应用持久化状态管理方法、装置、计算机设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210731971.8A CN115292625B (zh) | 2022-06-26 | 2022-06-26 | 单页面应用持久化状态管理方法、装置、计算机设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN115292625A CN115292625A (zh) | 2022-11-04 |
| CN115292625B true CN115292625B (zh) | 2024-01-30 |
Family
ID=83819493
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210731971.8A Active CN115292625B (zh) | 2022-06-26 | 2022-06-26 | 单页面应用持久化状态管理方法、装置、计算机设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN115292625B (zh) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105550187A (zh) * | 2014-11-03 | 2016-05-04 | 阿里巴巴集团控股有限公司 | 单页应用中浏览记录的管理方法及装置 |
| CN109800374A (zh) * | 2018-12-13 | 2019-05-24 | 平安普惠企业管理有限公司 | 临时页面数据处理方法、装置、计算机设备及存储介质 |
| CN110365640A (zh) * | 2019-05-30 | 2019-10-22 | 苏州浪潮智能科技有限公司 | 一种控制单页面应用路由的方法与装置 |
| CN111597488A (zh) * | 2020-05-06 | 2020-08-28 | 五八有限公司 | 页面加载方法、装置、电子设备及存储介质 |
| CN112612988A (zh) * | 2020-12-28 | 2021-04-06 | 深圳壹账通智能科技有限公司 | 页面处理方法、装置、计算机设备及存储介质 |
| CN113254753A (zh) * | 2021-07-06 | 2021-08-13 | 北京达佳互联信息技术有限公司 | 一种页面回退方法、装置、电子设备及存储介质 |
| CN113590052A (zh) * | 2021-09-29 | 2021-11-02 | 深圳市信润富联数字科技有限公司 | 信息存储方法、装置、设备及存储介质 |
| CN114217792A (zh) * | 2021-11-29 | 2022-03-22 | 上海瑞家信息技术有限公司 | 页面加载方法、设备、装置及存储介质 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| GB2546239A (en) * | 2015-11-23 | 2017-07-19 | Acadiant Ltd | A Method and system for providing and executing web applications |
| US11562037B2 (en) * | 2019-09-18 | 2023-01-24 | International Business Machines Corporation | Crawlability of single page applications |
-
2022
- 2022-06-26 CN CN202210731971.8A patent/CN115292625B/zh active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105550187A (zh) * | 2014-11-03 | 2016-05-04 | 阿里巴巴集团控股有限公司 | 单页应用中浏览记录的管理方法及装置 |
| CN109800374A (zh) * | 2018-12-13 | 2019-05-24 | 平安普惠企业管理有限公司 | 临时页面数据处理方法、装置、计算机设备及存储介质 |
| CN110365640A (zh) * | 2019-05-30 | 2019-10-22 | 苏州浪潮智能科技有限公司 | 一种控制单页面应用路由的方法与装置 |
| CN111597488A (zh) * | 2020-05-06 | 2020-08-28 | 五八有限公司 | 页面加载方法、装置、电子设备及存储介质 |
| CN112612988A (zh) * | 2020-12-28 | 2021-04-06 | 深圳壹账通智能科技有限公司 | 页面处理方法、装置、计算机设备及存储介质 |
| CN113254753A (zh) * | 2021-07-06 | 2021-08-13 | 北京达佳互联信息技术有限公司 | 一种页面回退方法、装置、电子设备及存储介质 |
| CN113590052A (zh) * | 2021-09-29 | 2021-11-02 | 深圳市信润富联数字科技有限公司 | 信息存储方法、装置、设备及存储介质 |
| CN114217792A (zh) * | 2021-11-29 | 2022-03-22 | 上海瑞家信息技术有限公司 | 页面加载方法、设备、装置及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN115292625A (zh) | 2022-11-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8230185B2 (en) | Method for optimizing cleaning of maps in FlashCopy cascades containing incremental maps | |
| CN108459913B (zh) | 数据并行处理方法、装置及服务器 | |
| US10620871B1 (en) | Storage scheme for a distributed storage system | |
| WO2017095820A1 (en) | Methods and devices for acquiring data using virtual machine and host machine | |
| CN114461593B (zh) | 日志写入方法及其装置、电子设备及存储介质 | |
| JP2024113165A (ja) | データ構造、メモリ手段、および装置 | |
| CN111078127B (zh) | 数据迁移方法、系统及装置 | |
| CN111046004B (zh) | 一种数据文件存储方法、装置、设备及存储介质 | |
| CN117492661A (zh) | 数据写入方法、介质、装置和计算设备 | |
| CN115292625B (zh) | 单页面应用持久化状态管理方法、装置、计算机设备及存储介质 | |
| CN113342554A (zh) | Io多路复用方法、介质、设备和操作系统 | |
| WO2023221804A1 (zh) | 内存管理方法、网络设备及计算机可读存储介质 | |
| US20090300102A1 (en) | Server for dynamically generating web contents | |
| CN111221642B (zh) | 一种数据处理方法、装置、存储介质及终端 | |
| CN116578410A (zh) | 资源管理方法、装置、计算机设备和存储介质 | |
| US9135058B2 (en) | Method for managing tasks in a microprocessor or in a microprocessor assembly | |
| CN112148513B (zh) | 单点服务数据的转储方法、装置及存储介质 | |
| CN111090629B (zh) | 一种数据文件存储方法、装置、设备及存储介质 | |
| CN114124680B (zh) | 一种文件访问控制告警日志管理方法及装置 | |
| CN111881085B (zh) | 一种读写带宽性能的优化方法及系统 | |
| CN118277344B (zh) | 分布式键值存储系统的存储节点层间合并方法及装置 | |
| CN107025144B (zh) | 用于写入以及读取数据集的方法 | |
| CN118796375A (zh) | 一种任务处理方法、装置、电子设备及存储介质 | |
| CN114661675A (zh) | 网盘文件处理方法及装置 | |
| CN117827474A (zh) | 一种数据处理方法以及相关设备 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: Room 103-27, Building 19, No. 1399, Liangmu Road, Cangqian Street, Yuhang District, Hangzhou City, Zhejiang Province, 311121 Applicant after: Hangzhou Meichuang Technology Co.,Ltd. Address before: 310011 room 1201, building 7, Tianxing International Center, No. 508, Fengtan Road, Gongshu District, Hangzhou, Zhejiang Province Applicant before: HANGZHOU MEICHUANG TECHNOLOGY CO.,LTD. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |