Web application front-end data storage and processing method and device and readable storage medium

Abstract

The invention provides a web application front-end data storage and processing method and device and a readable storage medium, and belongs to the technical field of front-end development. The method comprises the following steps: in response to the first access of a user to an online code editor, creating a target database; creating a target object storage space; responding to the code file written by the user in the online code editor, and generating a data object corresponding to the code file according to the file information of the code file written by the user; creating a first transaction, and in the first transaction, storing a data object corresponding to the code file into a target object storage space; submitting the first transaction, and storing the code file into a target database; and generating a spatial index of the target object storage space according to each data object in the target object storage space. According to the method and the device, the effects of improving the data storage and processing efficiency of the web application and reducing the front-end development difficulty of the web application can be achieved.

Description

Technical Field

[0001] The present application relates to the field of front-end development technology, and in particular to a method, device and readable storage medium for storing and processing front-end data of a web application. Background Art

[0002] With the continuous advancement of World Wide Web (web) technology, web browsers have been provided with powerful local data storage capabilities. Among them, IndexedDB, as a high-performance browser database, provides an efficient and secure local data storage solution for web applications. However, how to efficiently use IndexedDB to optimize the front-end data storage and processing of web applications still needs further research.

[0003] In the related technologies, the front-end data storage and processing methods of web applications mainly include Cookies, localStorage, sessionStorage and IndexedDB API. However, Cookies have the problem of small data storage capacity and poor data storage security; localStorage only supports simple key-value data storage and is not compatible with complex data structures and query operations; the front-end data stored in sessionStorage has a certain timeliness and is only valid before the same window is closed; IndexedDB API has the problem of long learning cycle and high learning difficulty, which leads to increased difficulty in front-end development of web applications. Therefore, there is an urgent need for a method to improve the data storage and processing efficiency of web applications and reduce the difficulty of front-end development. Summary of the invention

[0004] The purpose of the present application is to provide a method, device and readable storage medium for storing and processing front-end data of a web application, which can improve the data storage and processing efficiency of the web application and reduce the difficulty of front-end development of the web application.

[0005] The embodiment of the present application is implemented as follows:

[0006] In a first aspect of an embodiment of the present application, a method for storing and processing front-end data of a web application is provided, the method comprising:

[0007] In response to the user accessing the online code editor for the first time, creating a target database;

[0008] Create a target object storage space;

[0009] In response to a user writing a code file in an online code editor, a data object corresponding to the code file is generated according to file information of the code file written by the user;

[0010] Creating a first transaction, in which a data object corresponding to the code file is stored in a target object storage space;

[0011] Commit the first transaction and store the code file in the target database;

[0012] A spatial index of the target object storage space is generated according to each data object in the target object storage space.

[0013] As a possible implementation method, the web application front-end data storage and processing method further includes:

[0014] If a database version change event is detected, obtain the expected database version number and the current database version number of the target database;

[0015] Compare the expected database version number with the current database version number;

[0016] If the expected database version number is inconsistent with the current database version number, the target database is upgraded according to the expected database version number.

[0017] As a possible implementation, the web application front-end data storage and processing method further includes:

[0018] In response to the user's read operation, obtain the file identifier or query condition of the file to be read;

[0019] Creating a second transaction, in which, according to the file identifier or the query condition, a to-be-read object storage space is determined from the plurality of object storage spaces, and according to the file identifier or the query condition, a data object of the to-be-read file is read from the to-be-read object storage space;

[0020] Read the file to be read according to the data object of the file to be read.

[0021] As a possible implementation, the web application front-end data storage and processing method further includes:

[0022] Get the target space index input by the user;

[0023] Determine the storage space of the object to be queried according to the target spatial index and the spatial index of each object storage space;

[0024] Obtain and output the code files corresponding to each data object in the object storage space to be queried.

[0025] As a possible implementation, the web application front-end data storage and processing method further includes:

[0026] Get the index range entered by the user;

[0027] Determine the storage space of the object to be queried according to the index range and the spatial index of each object storage space;

[0028] Obtain and output the code files corresponding to each data object in the object storage space to be queried.

[0029] As a possible implementation, the target object storage space includes a cursor, and the cursor points to the data object in the target object storage space. The web application front-end data storage and processing method further includes:

[0030] Respond to the user's operation on the cursor and obtain the query conditions entered by the user;

[0031] According to the query conditions and cursor, the code files corresponding to the data objects in the target object storage space that meet the query conditions are obtained and output.

[0032] As a possible implementation method, the web application front-end data storage and processing method further includes:

[0033] In response to a user's operation of updating a target code file in an online code editor, a target data object corresponding to the updated target code file is obtained, a third transaction is created, in which the target data object is updated, and the updated target data object is stored in the object storage space where the target data object is located;

[0034] The third transaction is committed, and the updated target code file is stored in the target database.

[0035] As a possible implementation method, the web application front-end data storage and processing method further includes:

[0036] In response to the user deleting the target code file in the online code editor, the target data object corresponding to the target code file is deleted.

[0037] According to a second aspect of an embodiment of the present application, a computer device is provided. The computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the computer program is executed by the processor, the web application front-end data storage and processing method described in the first aspect is implemented.

[0038] In a third aspect of the embodiments of the present application, a computer-readable storage medium is provided, which stores a computer program. When the computer program is executed by a processor, the web application front-end data storage and processing method described in the first aspect is implemented.

[0039] The beneficial effects of the embodiments of the present application include:

[0040] The embodiment of the present application provides a web application front-end data storage and processing method. When a user accesses an online code editor through a browser for the first time, a target database is created, and a target object storage space is created according to the user's code writing operation to store the code file written by the user; when the user writes a code file on the online code editor, the data object corresponding to the code file is constructed according to the file information of the code file written by the user; a first transaction is automatically generated according to the user's operation of writing a code file on the online code editor, and the data object corresponding to the written code file is stored in the target object storage space in the first transaction; when the data object corresponding to the written code file is successfully stored in the target object storage space, the first transaction is automatically submitted, and the written code file is persistently stored in the target database; according to each data object in the target object storage space, a spatial index of the target object storage space is set. Wherein, the file information of the code file includes: key attribute information such as the unique identifier of the code file, the name of the code file, the content of the code file, and the creation time of the code file, and the file information of the code file is stored as a whole data object in the target object storage space, and a suitable spatial index is created for the target object storage space according to the attribute information corresponding to each data object in the target object storage space, so as to improve the query and reading efficiency of web front-end data. In this way, the data storage and processing efficiency of web applications can be improved, and the difficulty of front-end development of web applications can be reduced. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0042] Figure 1 A working principle diagram of a web application front-end data storage and processing method provided in an embodiment of the present application;

[0043] Figure 2 A flowchart of a first web application front-end data storage and processing method provided in an embodiment of the present application;

[0044] Figure 3 A flowchart of a second web application front-end data storage and processing method provided in an embodiment of the present application;

[0045] Figure 4 A flowchart of a third web application front-end data storage and processing method provided in an embodiment of the present application;

[0046] Figure 5 A flowchart of a fourth web application front-end data storage and processing method provided in an embodiment of the present application;

[0047] Figure 6 A flowchart of a fifth web application front-end data storage and processing method provided in an embodiment of the present application;

[0048] Figure 7 A flowchart of a sixth web application front-end data storage and processing method provided in an embodiment of the present application;

[0049] Figure 8 A flowchart of a seventh web application front-end data storage and processing method provided in an embodiment of the present application;

[0050] Fig. 9 A schematic diagram of the structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0051] In order to make the purpose, technical solution and advantages of the embodiments of the present application clearer, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. The components of the embodiments of the present application described and shown in the drawings here can be arranged and designed in various different configurations.

[0052] Therefore, the following detailed description of the embodiments of the present application provided in the accompanying drawings is not intended to limit the scope of the present application for which protection is sought, but merely represents selected embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without creative work are within the scope of protection of the present application.

[0053] It should be noted that similar reference numerals and letters denote similar items in the following drawings, and therefore, once an item is defined in one drawing, further definition and explanation thereof is not required in subsequent drawings.

[0054] In the description of the present application, it should be noted that the terms "first", "second", "third", etc. are only used to distinguish the description and cannot be understood as indicating or implying relative importance.

[0055] At present, when processing front-end data, traditional web applications often rely on server-side databases and complex network communications, which not only increases the burden on the server, but may also cause data synchronization delays, reduced user experience, and waste of network resources. Therefore, the storage and processing of web application front-end data is often achieved through LocalStorage, SessionStorage, Cookies, IndexedDBAPI, etc. However, Cookies have the problem of small data storage capacity and poor data storage security; localStorage only supports simple key-value data storage and is not compatible with complex data structures and query operations; the front-end data stored in sessionStorage has a certain timeliness and is only valid before the same window is closed; the IndexedDB API has a long learning cycle and high learning difficulty, which leads to the problem of increased difficulty in front-end development of web applications.

[0056] To this end, the embodiment of the present application provides a web application front-end data storage and processing method, when a user first accesses an online code editor, a target database is created, and a target object storage space is created to store the code file written by the user; when the user writes a code file on the online code editor, a data object corresponding to the code file is generated according to the attribute information of the code file written by the user; a first transaction is created, and in the first transaction, the data object corresponding to the code file is stored in the target object storage space; the first transaction is submitted, and the code file is stored in the target database; a spatial index of the target object storage space is generated according to the attribute information of each data object in the target object storage space. In this way, the data storage and processing efficiency of the web application can be improved, and the difficulty of front-end development of the web application can be reduced.

[0057] In addition, in web applications, the code files written by users are one of the core data of web applications. The code files written by users usually contain a large amount of text information, such as code, comments, version control information, etc. The code files written by users need to be frequently read, written, queried, and updated. However, traditional client data storage technology has shortcomings such as limited storage capacity, limited data structure support, and poor query performance, which leads to the inability of traditional client data storage technology to meet the needs of web applications for efficient storage and processing of code files. Among them, traditional client data storage technologies include LocalStorage, SessionStorage, Cookies, etc.

[0058] The web application front-end data storage and processing method provided in the embodiment of the present application is implemented through IndexedDB, and a target object storage space is created to separately store data objects corresponding to code files written by users, so as to achieve efficient storage, fast access and data processing of data objects corresponding to code files, thereby meeting the needs of web applications.

[0059] The following is a detailed explanation of the web application front-end data storage and processing method provided by the embodiment of the present application in conjunction with the accompanying drawings.

[0060] Figure 1 A working principle diagram of a web application front-end data storage and processing method provided in this application, see Figure 1 The front-end data storage and processing of the web application provided in this application is based on IndexedDB. The front-end of the web application interacts with the user interface layer via the database operation layer. The database operation layer is used to implement the processing of the front-end data of the web application and store the front-end data of the web application through the data storage layer. The user can enter query conditions in the user interface layer, and the data query layer performs code data query based on the query conditions entered by the user.

[0061] Optionally, IndexedDB is a way to store data on the browser side. IndexedDB can enrich the client's query method, and IndexedDB is a way to store data locally, which can effectively reduce the impact of the network on the page data of web applications. Among them, IndexedDB comes with transactions, so that all database operations are bound to specific transactions, and these transactions are automatically submitted. It is worth noting that IndexedDB is oriented to data objects, and the local storage method provided by IndexedDB stores Javascript objects.

[0062] However, most of the data in IndexedDB API is processed asynchronously. When IndexedDB API uses asynchronous data processing, the API will not immediately return the code data queried by the user, but will first give the user a callback. The essence of asynchronous API is to first send an operation request to the database. When the operation is completed, a DOM event will be received. Through the event, you can determine whether the operation is successfully implemented and get the result of the operation based on the event.

[0063] Optionally, a web application is an application program that can be accessed through the web. The web application program mainly consists of a client and a server, wherein the client is used to indicate the user's network browser, and the server is used to indicate the web server, application server, and database, etc. The user accesses the web application through the browser, and the browser sends a corresponding access request to the web application according to the user's access operation. After receiving the access request, the web server calls the corresponding application server for data processing according to the content of the access request. After the application server completes the processing, it generates the corresponding response content and feeds it back to the web server. The web sends the response content to the user's browser, and the user's browser parses the received response content and presents the parsing result to the user through the user display interface.

[0064] Figure 2 This is a flowchart of a web application front-end data storage and processing method provided by this application. This method can be applied to computer devices or web servers, and this application does not make specific limitations on this. Figure 2 , the embodiment of the present application provides a web application front-end data storage and processing method, including:

[0065] S201. In response to a user accessing an online code editor for the first time, a target database is created.

[0066] Optionally, the online code editor is a code editing tool residing on a remote server, and a user can access the online code editor through a web browser and write code files through the online code editor.

[0067] Optionally, when the user writes code for the first time using the online code editor provided by the browser, the system will automatically call the indexedDB.open() method to create a database and specify the name and version number of the database. The data name is used to indicate the label corresponding to the database, and the database version number is used to identify the data change status in the database.

[0068] Optionally, the target database is used to indicate the database automatically created by the system when the user first accesses the online code editor. The target database can systematically manage code files and provide a unified interface and service for other applications. The name and version number of the target database can be randomly set by the system, and this application does not make specific restrictions on this.

[0069] In addition, the target database can ensure the data integrity of the code data stored in the target database through the version number, and can prevent concurrent modification and loss of the code data in the target database; the target database can also record the change history of the code data in the target database through the version number; the target database can also perform code data conflict detection through the version number, and determine data conflicts and concurrent modifications in the target database by comparing version numbers.

[0070] S202: Create a target object storage space.

[0071] Optionally, when a user accesses an online code editor via a browser for the first time, the system automatically creates a target object storage space. The target object storage space is mainly used to store data objects corresponding to code files written by users. The name of the target object storage space may be codeFiles, but this does not mean that the name of the target object storage space can only be codeFiles. This application does not make any specific limitations on this.

[0072] It is worth noting that codeFiles is the name of the target object storage space. codeFiles has clear semantics and is used to indicate that the target object storage space is used to store data objects corresponding to code files. Developers can quickly understand the function and purpose of the target object storage space through the name of the target object storage space.

[0073] Optionally, there are multiple object storage spaces in the web system, and the target object storage is used to store data objects corresponding to the code files written by users. In the target object storage space, each code file corresponds to only one data object, and the data object contains key attribute information such as the unique identifier of the code file, the code file name, the code file content, and the code file creation time. The attribute information contained in the data object corresponding to each code file not only meets the basic storage requirements of the code file, but also provides necessary data support for querying, updating, and deleting the code file.

[0074] S203: In response to the user writing a code file in the online code editor, a data object corresponding to the code file is generated according to file information of the code file written by the user.

[0075] Optionally, the file information of the code file is used to indicate some key attribute information of the code file, and the file information of the code file includes: key attribute information such as a unique identifier of the code file, a code file name, code file content, and a code file creation time, and a data object corresponding to the code file is constructed according to the key attribute information of the code file. Among them, the unique identifier of the code file can be an ID of the code file, and this application does not make specific limitations on this.

[0076] Optionally, before writing the code data contained in the code file into the database, the system will automatically construct a data object based on the file information of the code file. The data object corresponding to the code file is a data record containing key attribute information such as the unique identifier of the code file, the code file name, the code file content, and the code file creation time.

[0077] Optionally, the user accesses an online code editor through a browser, and the user can write a code file on the code editor. The system automatically constructs a data object according to the file information of the code file written by the user.

[0078] S204: Create a first transaction. In the first transaction, store the data object corresponding to the code file into the target object storage space.

[0079] Optionally, the first transaction is used to indicate that when a user accesses an online code editor through a browser and writes a code file through the online code editor, the web application system automatically constructs a transaction. In the first transaction, the system calls methods such as objectStore.add() or objectStore.put() to store the data object corresponding to the written code file in the target object storage space codeFiles.

[0080] Optionally, if a data object corresponding to the code file already exists in the target object storage space, the web system updates the code file content contained in the data object corresponding to the code file through a put() method.

[0081] It is worth mentioning that transactions are the basic unit of IndexedDB operations. Transactions can ensure the atomicity, consistency, isolation, and persistence (ACID characteristics) of web system data processing.

[0082] S205: Commit the first transaction and store the code file in the target database.

[0083] Optionally, when the data object corresponding to the written code file is successfully stored in the target object storage space, the first transaction is automatically committed, and the web system automatically persists the modified content corresponding to the code file to the target database.

[0084] Exemplarily, when a user accesses an online code editor through a browser to write or modify a code file, the web system uses the indexedDB.transaction() method to create a transaction and specifies the transaction as read-write mode. In the transaction, the web system uses the objectStore.add() or objectStore.put() method to store the code file data object in the target object storage space codeFile.

[0085] S206: Generate a spatial index of the target object storage space according to each data object in the target object storage space.

[0086] Optionally, the web system automatically creates a spatial index for the target object storage space based on the key attribute information of each data object in the target object storage space. The spatial index of the target object storage space is used to indicate the index tag corresponding to the target object storage space. The spatial index of the target object storage space can be an attribute index such as the file name and the creation time. Among them, the file name index allows developers to quickly retrieve code files based on the file name, and the file name index can provide great help for users to quickly find and edit code files with specific names; the creation time index allows developers to sort and filter code files based on the creation time of the code files, and the creation time index can provide substantial help for managing versions and viewing historical change records of code files.

[0087] Optionally, when executing a query operation, the developer can quickly locate the data object required by the user according to the spatial index of the target object storage space, thereby improving the efficiency of data query.

[0088] Optionally, the target database includes not only the target object storage space, but also other object storage spaces. A corresponding spatial index is created for each object storage space in the target database. The spatial index can speed up the query of the code file, but it will also increase the storage cost and data writing overhead of the target database. Therefore, it is necessary to weigh the number of spatial index settings and the type of spatial index in the target database.

[0089] Optionally, a spatial index for each object storage space in the target database is created based on the user's query requirements. For example, if the user often queries code files based on the file name, a file name index corresponding to each object storage space can be created based on the file name contained in each data object in each object storage space. Another example is that if the user often queries code files based on creation events, a creation time index corresponding to each object storage space can be created based on the creation events contained in each data object in each object storage space. The spatial index design of the object storage space is set according to the actual situation, and this application does not make any specific limitations on this.

[0090] In an embodiment of the present application, when a user accesses an online code editor through a browser for the first time, a target database is created, and a target object storage space is created according to the user's code writing operation to store the code file written by the user; when the user writes a code file on the online code editor, a data object corresponding to the code file is constructed according to the file information of the code file written by the user; a first transaction is automatically generated according to the user's operation of writing a code file on the online code editor, and the data object corresponding to the written code file is stored in the target object storage space in the first transaction; when the data object corresponding to the written code file is successfully stored in the target object storage space, the first transaction is automatically submitted, and the written code file is persistently stored in the target database; according to each data object in the target object storage space, a spatial index of the target object storage space is set. Among them, the file information of the code file includes: key attribute information such as the unique identifier of the code file, the name of the code file, the content of the code file, and the creation time of the code file, and the file information of the code file is stored as a whole data object in the target object storage space, and a suitable spatial index is created for the target object storage space according to the attribute information corresponding to each data object in the target object storage space, so as to improve the query and reading efficiency of web front-end data. In this way, the data storage and processing efficiency of web applications can be improved, and the difficulty of front-end development of web applications can be reduced.

[0091] In the front end of web applications, efficient data storage and efficient data reading capabilities are the cornerstones of achieving a good user experience. The web application front end data storage and processing method provided in the embodiment of the present application provides a powerful data storage and processing capability for the web system through IndexedDB, thereby realizing an efficient storage and reading mechanism for code data in the web system.

[0092] In an optional implementation, when a user writes or modifies a code file on an online code editor through a browser, the web system will actively trigger a data storage operation. The process of web front-end data storage mainly includes: the web system calls the indexedDB.transaction() method to create a transaction, and sets the transaction to read-write mode, at which time the code data can be added or updated to the target database; in the transaction, the web system locates the target object storage space through the transaction.objectStore('codeFiles') method; the web system uses the objectStore.add() or objectStore.put() method to store the data object corresponding to the written or modified code file in the target object storage space, where if the code file is stored for the first time, the add() method is used; if the target file already exists and needs to be updated, the put() method is used, and both the add() and put() methods determine whether to add a new record or update an existing record based on the unique identifier of the data object; when the data object corresponding to the code file is successfully stored in the target object storage space, the transaction is automatically committed, that is, the written or modified code file is persisted to the database, and the code file in the database can remain unchanged even after the browser crashes or restarts.

[0093] In an optional embodiment, see Figure 3 The web application front-end data storage and processing method provided in the embodiment of the present application also includes:

[0094] S301: If a database version change event is detected, obtain the expected database version number and the current database version number of the target database.

[0095] Optionally, the database version change event is used to indicate an event in which the current version number of the database changes compared to the original version number or the version number of the previous period; the expected database version number is used to indicate the version structure that the user expects the database to reach at the current moment; and the current database version number is used to indicate the actual version structure of the database at the current moment.

[0096] It is worth noting that the database version change event can be implemented by the onupgradeneeded event, and this application does not make any specific limitations on this.

[0097] S302: Compare the expected database version number with the current database version number.

[0098] Optionally, the current database version number of the target database is compared with the expected database version number that the user expects to reach, so as to obtain a comparison result between the current database version number of the target database and the expected database version number that the user expects to reach.

[0099] S303: If the expected database version number is inconsistent with the current database version number, the target database is upgraded according to the expected database version number.

[0100] Optionally, in the onupgradeneeded event processing function, when the current database version number of the target database at the current moment is inconsistent with the expected database version number that the user expects to achieve, a database structure upgrade operation is performed to complete the version upgrade of the target database.

[0101] Optionally, the database structure upgrade operation may be to create a new object storage space (Object Store) in the target database or to modify the property information of an existing object storage space in the target database, etc., which is not specifically limited in the present application.

[0102] In the embodiment of the present application, by monitoring the database version change event, and dynamically executing the database structure version upgrade operation in the database version change event processing function, and retaining the old version of the database structure. In this way, the present application can create, upgrade and roll back the database structure according to the needs of the web application. When the web application version is updated or the function is expanded, the database structure can be automatically adjusted, which greatly improves the flexibility and scalability of the database.

[0103] In an optional embodiment, see Figure 4 The web application front-end data storage and processing method provided in the embodiment of the present application also includes:

[0104] S401. In response to a user's read operation, a file identifier or a query condition of a file to be read is obtained.

[0105] Optionally, the read operation is used to instruct the user to view or open the initialization code file of the browser page. When the user triggers a file of the browser initialization page with a mouse or finger, the web system automatically obtains the file identifier or query condition of the file.

[0106] Optionally, the file to be read is used to indicate the code w file opened by the user on the browser initialization page, and the file to be read can be any code file on the browser initialization page; the file identifier of the file to be read is used to indicate the file name of the code file randomly opened by the user, and the query condition is used to indicate the original query terms randomly presented on the browser initialization page. After the user clicks on any term on the browser initialization page, the selected term will be used as the user's query condition at the current moment.

[0107] S402: Create a second transaction. In the second transaction, determine a to-be-read object storage space from multiple object storage spaces according to a file identifier or a query condition, and read a data object of the to-be-read file from the to-be-read object storage space according to the file identifier or the query condition.

[0108] Optionally, when the user views or opens the code file on the initial page of the browser, the web system will automatically create a second transaction through the indexedDB.transaction('codeFiles','readonly') method and set the second transaction to read-only mode. The read-only transaction can ensure that the target database does not modify the data while the user is reading the code file, thereby ensuring the consistency of the code data.

[0109] Optionally, in the second transaction, the web system locates the codeFiles object storage space from multiple object storage spaces in the target database through the transaction.objectStore('codeFiles') method, and calls the objectStore.get() or objectStore.getAll() method to retrieve the data object corresponding to the code file to be read from the codeFiles object storage space according to the file identifier or query condition of the code file to be read.

[0110] It is worth noting that the get() method is used to retrieve a single data object based on the unique identifier of the code file, while the getAll() method is used to retrieve all data objects that meet specific conditions. The specific conditions may be the prefix of the file name, etc. This application does not make specific limitations on this.

[0111] S403: Read the file to be read according to the data object of the file to be read.

[0112] Optionally, when the data object of the file to be read is successfully retrieved, the web system will display the code content of the code file corresponding to the data object on the online code editor provided by the browser for the user to view.

[0113] In an optional implementation, the web application front-end data storage and processing method also includes data separation of code data in code files. The data classification methods are different. The first method is to separate different types of code data into different object storage spaces for storage according to the type of code data in the code file. For example, user information, code files, configuration settings, etc. in the code file can be stored in different object storages, thereby reducing the number of data objects in each object storage space and improving the query efficiency of web data. The second method is to separate the code file data according to the attribute information and numerical information of the data object. For example, when storing the code file, text data, metadata, etc. can be stored separately in different storage spaces, wherein metadata can be stored in the object storage space, and text data can be stored in the Blob object storage space or the File object storage space, and referenced by a URL. In this way, redundant data in the object storage space can be reduced and the reading speed of code data can be improved.

[0114] In an optional embodiment, see Figure 5 The web application front-end data storage and processing method provided in the embodiment of the present application also includes:

[0115] S501: Obtain a target space index input by a user.

[0116] Optionally, the target space index is used to indicate the space index of the object storage space input by the user on the online code editor provided by the browser. The target space index may be the space index of any object storage space in the target database, which is not specifically limited in the present application.

[0117] S502: Determine the object storage space to be queried according to the target space index and the space indexes of each object storage space.

[0118] Optionally, the object storage space to be queried is determined according to the matching result between the target spatial index input by the user and the spatial index of each object storage space in the target database. The object storage space to be queried is the object storage space corresponding to the target spatial index specified by the user.

[0119] S503: Obtain and output the code file corresponding to each data object in the object storage space to be queried.

[0120] Optionally, the web system presents the code files corresponding to each data object in the object storage space to be queried to the user via an online code editor provided by the browser.

[0121] Optionally, the web system utilizes the spatial index of each object storage space in the target database to perform efficient index query operations, and uses the objectStore.index('fileNameIndex').get() method to quickly retrieve code files according to the file name.

[0122] In an optional embodiment, see Figure 6 The web application front-end data storage and processing method provided in the embodiment of the present application also includes:

[0123] S601: Obtain an index range input by a user.

[0124] Optionally, the index range is used to indicate an index interval specified by a user. The index range may be a user name, a creation time range, etc., and this application does not make any specific limitations on this.

[0125] S602: Determine the object storage space to be queried according to the index range and the spatial index of each object storage space.

[0126] Optionally, the web system determines the object storage space to be queried according to a matching result between an index range specified by the user and a spatial index of each object storage space in the target database.

[0127] S603: Obtain and output the code file corresponding to each data object in the object storage space to be queried.

[0128] Optionally, the web system presents the code files corresponding to each data object in the object storage space to be queried to the user via an online code editor provided by the browser. For example, the web system calls IDBKeyRange to create a range condition according to the index range specified by the user, and performs a range query in combination with the openCursor() or openKeyCursor() method.

[0129] In an optional implementation, the target object storage space includes a cursor, and the cursor points to the data object in the target object storage space, see Figure 7 The web application front-end data storage and processing method provided in the embodiment of the present application also includes:

[0130] Optionally, in IndexedDB, a cursor may be created on the target object storage space to traverse all code file data objects in the object storage space that meet the query condition.

[0131] S701. Respond to the user's operation on the cursor and obtain the query condition input by the user.

[0132] Optionally, the user may use an online code editor to create a cursor in a specified object storage space, and may enter a query condition in the online code editor, where the query condition is used to indicate a search expression selected by the user on a browser page or manually entered by the user.

[0133] S702: According to the query condition and the cursor, obtain and output the code file corresponding to each data object that meets the query condition in the target object storage space.

[0134] Optionally, the user can use the cursor to roll back and traverse all data objects in the target object storage space. The user can independently select the target data object from the target object storage space according to the query conditions. The web system will eventually present the code file corresponding to the target data object selected by the user to the user via the online code editor.

[0135] In the embodiment of the present application, multiple indexes are created for the object storage space in the target database according to the data access mode and the user's query requirements. At the same time, the user can also create a cursor in the object storage space, and when using the cursor for range query and item-by-item retrieval, an efficient traversal algorithm and cache mechanism are used to effectively reduce unnecessary database access. In this way, the accuracy and efficiency of data query can be significantly improved.

[0136] In an optional embodiment, see Figure 8 The web application front-end data storage and processing method provided in the embodiment of the present application also includes:

[0137] S801. In response to a user's operation of updating a target code file in an online code editor, a target data object corresponding to the updated target code file is obtained, a third transaction is created, in which the target data object is updated, and the updated target data object is stored in the object storage space where the target data object is located.

[0138] Optionally, the target code file is used to indicate a code file selected by the user from the target database by retrieval or query, etc., and this application does not make any specific limitation on this.

[0139] Optionally, the user can update the code data in the selected target code file through the online code editor provided by the browser. The web system automatically creates a third transaction when the user updates the target code file, and in the third transaction, updates the target data object corresponding to the updated target code file to the object storage space where the target data object is located.

[0140] S802: Commit the third transaction and store the updated target code file in the target database.

[0141] Optionally, when the user completes the target code file update, the web system automatically submits the third transaction, and after the target data object is successfully stored in the object storage space, the original target code file in the target database is updated according to the updated code file. It is worth noting that both the data object update and the target code file update use the unique identifier of the target code file to replace the original data.

[0142] In the embodiment of the present application, a transaction queue management strategy is adopted to sort multiple transactions according to priority and dependency, ensuring that high-priority transactions are executed first and avoiding unnecessary lock waits, and also realizing the automatic submission and rollback mechanism of transactions. In this way, the transaction processing process is simplified, transaction conflicts and lock wait events are reduced, and the concurrent performance of data operations is improved.

[0143] In an optional implementation manner, the web application front-end data storage and processing method further includes:

[0144] In response to the user deleting the target code file in the online code editor, the target data object corresponding to the target code file is deleted.

[0145] Optionally, when the user deletes the target code file via the online code editor provided by the browser, the web system will delete the corresponding data object from the object storage space where the data object corresponding to the target code file is located according to the unique identifier of the target code file. For example, when the user deletes the target code file on the online code editor, the web system will use the objectStore.delete() method to delete the corresponding data object from the codeFiles object storage space according to the unique identifier of the target code file.

[0146] In an optional implementation, the web application front-end data storage and processing method provided in the embodiment of the present application also needs to deduplicate the code data in the target database. The specific process is as follows: avoid storing redundant data in the target database. For example, when multiple data objects need to reference the same data, the referenced data can be stored separately in a Blob object storage space or a File object storage space and referenced by a URL instead of being stored repeatedly in each data object. Data duplication can also be detected by using a unique identifier. Before storing new code data, the target database can first check whether the same unique identifier already exists in the target database. If it already exists, the code content can be directly updated. If not, the new code data is inserted. In addition, by introducing a data caching mechanism in the web system, the code files that users have recently accessed or frequently accessed can be cached in the memory of the web system to increase the speed at which users read code files.

[0147] In the embodiment of the present application, data is stored in blocks according to logic and function to reduce redundant data and repeated queries. At the same time, a data caching mechanism is introduced to cache recently accessed or frequently accessed data in the memory of the web system, which can increase the reading speed of the code file. In addition, batch processing technology is also used to split a large number of data operations into multiple small batches, which can effectively avoid performance jams caused by one-time operations. In this way, the efficiency of data storage and data processing can be further improved.

[0148] In an optional implementation, the web application front-end data storage and processing method provided in the embodiment of the present application also needs to perform compatibility testing on different browsers to ensure the stability and consistency of IndexedDB operations in different environments. For browsers or devices that do not support IndexedDB, a downgrade solution is provided, such as using alternative technologies such as WebStorage to store a small amount of data or prompting the user to change the browser.

[0149] In addition, the processing of asynchronous operations can be simplified through Promise and async / await syntax, which allows the web system to handle asynchronous code like synchronous code, improving the readability and maintainability of the code. For example, use async functions to encapsulate database operations, and use the await keyword inside the function to wait for the resolution of the Promise object. In this way, multiple database operations can be performed without blocking the main thread, and subsequent logic can be executed after the operations are completed.

[0150] In the embodiments of the present application, extensive compatibility testing is performed on different browsers, compatibility issues are recorded and found, and a downgrade solution is provided for browsers or devices that do not support IndexedDB. In this way, the stability and data consistency of the code files can be guaranteed on different browsers or different devices.

[0151] The following describes a computer device and a computer-readable storage medium used to execute the web application front-end data storage and processing method provided by the present application. The specific implementation process and technical effects are described above and will not be repeated below.

[0152] Fig. 9 is a schematic diagram of the structure of a computer device provided in an embodiment of the present application. Fig. 9 The computer device includes: a memory 901 and a processor 902. The memory 901 stores a computer program that can be run on the processor 902. When the processor 902 executes the computer program, the steps in any of the above method embodiments are implemented.

[0153] An embodiment of the present application further provides a computer-readable storage medium, which stores a computer program. When the computer program is executed by a processor, the steps in the above-mentioned method embodiments can be implemented.

[0154] Optionally, the present application also provides a program product, such as a computer-readable storage medium, including a program, which, when executed by a processor, is used to execute any of the above-mentioned web application front-end data storage and processing method embodiments.

[0155] The above-mentioned integrated unit implemented in the form of a software functional unit can be stored in a computer-readable storage medium. The above-mentioned software functional unit is stored in a storage medium, including a number of instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor (English: processor) to perform some steps of the methods of various embodiments of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (English: Read-Only Memory, abbreviated: ROM), random access memory (English: Random Access Memory, abbreviated: RAM), disk or optical disk and other media that can store program codes.

[0156] The above are only specific implementations of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0157] The above description is only the preferred embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various modifications and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A web application front-end data storage and processing method, characterized in that: The method comprises: In response to the user accessing the online code editor for the first time, creating a target database; Create a target object storage space; In response to a user writing a code file in the online code editor, generating a data object corresponding to the code file according to file information of the code file written by the user; Creating a first transaction, in which a data object corresponding to the code file is stored in the target object storage space; Committing the first transaction and storing the code file in the target database; A spatial index of the target object storage space is generated according to each data object in the target object storage space.

2. The web application front-end data storage and processing method according to claim 1 is characterized in that: The method further comprises: If a database version change event is detected, the expected database version number and the current database version number of the target database are obtained; Comparing the expected database version number with the current database version number; If the expected database version number is inconsistent with the current database version number, the target database is upgraded according to the expected database version number.

3. The web application front-end data storage and processing method according to claim 1 is characterized in that: The method further comprises: In response to the user's read operation, obtain the file identifier or query condition of the file to be read; Creating a second transaction, in which, according to the file identifier or the query condition, a to-be-read object storage space is determined from a plurality of object storage spaces, and according to the file identifier or the query condition, a data object of the to-be-read file is read from the to-be-read object storage space; The file to be read is read according to the data object of the file to be read.

4. The web application front-end data storage and processing method according to claim 1 is characterized in that: The method further comprises: Get the target space index input by the user; Determine the object storage space to be queried according to the target spatial index and the spatial indexes of each object storage space; Obtain and output the code files corresponding to each data object in the storage space of the object to be queried.

5. The web application front-end data storage and processing method according to claim 1, characterized in that: The method further comprises: Get the index range entered by the user; Determine the object storage space to be queried according to the index range and the spatial index of each object storage space; Obtain and output the code files corresponding to each data object in the storage space of the object to be queried.

6. The web application front-end data storage and processing method according to claim 1, characterized in that: The target object storage space includes a cursor, and the cursor points to a data object in the target object storage space. The method further includes: In response to the user's operation on the cursor, obtaining the query condition input by the user; According to the query condition and the cursor, the code file corresponding to each data object in the target object storage space that meets the query condition is acquired and output.

7. The web application front-end data storage and processing method according to claim 1, characterized in that: The method further comprises: In response to the user's operation of updating the target code file in the online code editor, obtaining a target data object corresponding to the updated target code file, creating a third transaction, updating the target data object in the third transaction, and storing the updated target data object in the object storage space where the target data object is located; The third transaction is committed, and the updated target code file is stored in the target database.

8. The web application front-end data storage and processing method according to claim 1, characterized in that: The method further comprises: In response to a user deleting a target code file in the online code editor, a target data object corresponding to the target code file is deleted.

9. A computer device, characterized in that: include: A memory and a processor, wherein the memory stores a computer program that can be run on the processor, and when the processor executes the computer program, the steps of the method described in any one of claims 1 to 8 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, which, when executed by a processor, implements the steps of the method according to any one of claims 1 to 8.

Images