Network range front-end data persistent storage method, system and program

Abstract

The invention discloses a persistent storage method, system and program for front-end data of a network target range. The method comprises the following steps: initializing an IndexedDB database; based on an initialized IndexedDB database, a user creates a training template of a network target range, different identification types are transmitted to the IndexedDB according to different persistent operation types corresponding to the training template, the IndexedDB creates corresponding databases for different training templates according to the received persistent operation types and the types of the network target range training templates, and the data of the network target range are transmitted to the IndexedDB. Performing various types of persistence operations on the data in the database; according to the method and the device, the user can retrieve the historically edited data under the condition that the drill data is not stored or the browser is flash back and other unpredictable conditions.

Description

Technical Field

[0001] The present invention relates to a method, system and program for persistent storage of front-end data, and in particular to a method, system and program for persistent storage of front-end data of a network range. Background Art

[0002] Cyber ​​Range is a technology that simulates and reproduces the network architecture, system equipment, operating status and operating environment of business processes in real cyberspace.

[0003] The application scenario of the cyber range is a customized training and testing platform for different industries and business scenarios. During the actual training and drills, trainers need to establish a variety of drill template scenarios for actual combat drills. In order to avoid data loss during the creation of drill template data, the input drill data needs to be persistently stored to facilitate subsequent data retrieval.

[0004] At present, common storage methods in the front end include sessionStorage and localStorage. SessionStorage is a temporary session storage object newly added in HTML5, which is used to temporarily save the same window. It can store data for a short time, and the data will be lost when the browser is closed. LocalStorage is a Web storage technology that allows users to store data in the form of key-value pairs in the browser. The data can be stored for a long time and will not be lost due to browser closure. However, the storage space of sessionStorage and localStorage is limited. For current mainstream browsers, sessionStorage and localStorage can only store 5MB of data, which cannot meet the demand for storing large-capacity training data. Summary of the invention

[0005] Purpose of the invention: In view of the problems existing in the above-mentioned prior art, the purpose of the present invention is to provide a method, system and program for persistent storage of network shooting range front-end data that can store a large amount of structured data, thereby meeting the storage requirements of large-capacity training data.

[0006] Technical solution: To achieve the above-mentioned invention object, the present invention adopts the following technical solution:

[0007] The network range front-end data persistent storage method of the present invention comprises the following steps:

[0008] Step 1: Initialize the IndexedDB database;

[0009] Step 2: Based on the initialized IndexedDB database, the user creates a network range training template, and passes different identification types to IndexedDB according to the different persistence operation types corresponding to the training template. IndexedDB creates corresponding databases for different training templates based on the received persistence operation type and the type of the network range training template, and performs various types of persistence operations on the data in the database; specifically,

[0010] Start the timer and use the IndexedDB.dbOperation() method to perform various types of operations to update the database data in real time;

[0011] Define the readType variable to determine the current operation mode;

[0012] Use res.transaction(storeName,readType).objectStore(storeName) to process the read and write permissions of data; storeName is the database name;

[0013] Use objectStore[type](data) to update the data in the database; type is the type of persistence operation, and data is the data in the database;

[0014] Use onsuccess or onerror to return the result of success or failure of database update.

[0015] Furthermore, the step 1 specifically comprises:

[0016] Get the indexedDB object through window.indexedDB and make it compatible with different browsers;

[0017] Use the open method of indexedDB to open the database connection;

[0018] Use connection.onupgradeneeded to handle the logic of opening the IndexedDB database link or version changes;

[0019] Use db.createObjectStore() to create a database collection;

[0020] Use the onsuccess and onerror methods of the connection to handle the return results of successful and failed database initialization.

[0021] Furthermore, the

[0022] Step 2: Create a training template for the network range, including adding a new training template, filling in basic information, drawing the network topology, and arranging training tasks;

[0023] Specifically, the newly added training template is as follows: the user selects the newly added training template, and determines whether the information not saved last time can be queried through IndexedDB.dbOperation(tempName,'get'), where tempName is the template type, and the value is single, team, red, topo or range, which respectively represent individual training, team training, red-blue confrontation, topology template and shooting range evaluation; when it can be queried, ask whether to restore, and if you choose to restore, the data not saved last time will be displayed; if you do not restore or the information not saved last time is not queried, jump to the empty team training template, and start the timer to call IndexedDB.dbOperation(tempName,'add',data) to store the input information in real time, and distinguish whether it is a newly added template or an edited template through different parameters. If it is a newly added template, the second parameter is confirmed as add, and if it is an edited template, the second parameter is confirmed as edit;

[0024] Filling in the basic information specifically includes entering the template name and template description information, selecting the training difficulty and training type, and selecting the number of trainees;

[0025] The network topology is drawn, and the user selects various types of network devices and terminal devices and realizes network connection, and the data in the process is stored through IndexedDB.dbOperation(tempName,'add',data);

[0026] The arrangement of the training tasks specifically includes adding corresponding tasks according to the training requirements and storing them through IndexedDB.dbOperation(tempName,'add',data);

[0027] The newly added training template also includes that when the user chooses to restore the data that was not saved last time, a variable myCacheList is defined to record the cache information, the existing data in myCacheList is displayed, and the variable idKey is used to record the unique identifier id of the cache, so that the subsequent use of IndexedDB.dbOperation (tempName, 'add', data) to store information will put idKey into data to distinguish the data;

[0028] The creation of the training template for the network target range also includes, after the creation is completed, saving the template data, and then deleting the data corresponding to the current idKey from the cache by calling IndexedDB.dbOperation(tempName, delete, idKey) after the data is saved.

[0029] Furthermore, the types of persistence operations described in step 2 include adding, deleting, modifying and querying.

[0030] Based on the same inventive concept, the present invention also provides a network range front-end data persistent storage system, including:

[0031] Initialization module, used to initialize the IndexedDB database;

[0032] The operation module is used to allow users to create a network range training template based on the initialized IndexedDB database, and pass different identification types to IndexedDB according to different persistent operation types corresponding to the training template. IndexedDB creates corresponding databases for different training templates based on the received persistent operation type and the type of the network range training template, and performs various types of persistent operations on the data in the database; specifically,

[0033] Start the timer and use the IndexedDB.dbOperation() method to perform various types of operations to update the database data in real time;

[0034] Define the readType variable to determine the current operation mode;

[0035] Use res.transaction(storeName,readType).objectStore(storeName) to process the read and write permissions of data; storeName is the database name;

[0036] Use objectStore[type](data) to update the data in the database; type is the type of persistence operation, and data is the data in the database;

[0037] Use onsuccess or onerror to return the result of success or failure of database update.

[0038] Furthermore, the specific implementation method of the initialization module is:

[0039] Get the indexedDB object through window.indexedDB and make it compatible with different browsers;

[0040] Use the open method of indexedDB to open the database connection;

[0041] Use connection.onupgradeneeded to handle the logic of opening the IndexedDB database link or version changes;

[0042] Use db.createObjectStore() to create a database collection;

[0043] Use the onsuccess and onerror methods of the connection to handle the return results of successful and failed database initialization.

[0044] Furthermore, the operation module creates a training template for the network range, including adding a new training template, filling in basic information, drawing a network topology, and arranging training tasks;

[0045] The newly added team training template is specifically as follows: the user selects a newly added training template, and determines whether the information that was not saved last time can be queried through IndexedDB.dbOperation(tempName,'get'), where tempName is the template type, and the value is single, team, red, topo or range, which respectively represent individual training, team training, red-blue confrontation, topology template and shooting range evaluation; when it can be queried, ask whether to restore, and if you choose to restore, the data that was not saved last time will be displayed; if you do not restore or the information that was not saved last time is not queried, jump to the empty team training template, and start the timer to call IndexedDB.dbOperation(tempName,'add',data) to store the input information in real time, and use different parameters to distinguish whether it is a newly added template or an edited template. If it is a newly added template, the second parameter is confirmed to be add, and if it is an edited template, the second parameter is confirmed to be edit;

[0046] Filling in the basic information specifically includes entering the template name and template description information, selecting the training difficulty and training type, and selecting the number of trainees;

[0047] The network topology is drawn, and the user selects various types of network devices and terminal devices and realizes network connection, and the data in the process is stored through IndexedDB.dbOperation(tempName,'add',data);

[0048] The arrangement of the training tasks specifically includes adding corresponding tasks according to the training requirements and storing them through IndexedDB.dbOperation(tempName,'add',data);

[0049] The newly added team training template also includes that when the user chooses to restore the last unsaved data, a variable myCacheList is defined to record the cache information, the existing data in myCacheList is displayed, and the variable idKey is used to record the unique identifier id of the cache, so that the subsequent use of IndexedDB.dbOperation (tempName, 'add', data) to store information will put the idKey into data to distinguish the data;

[0050] The creation of a training template for a network target range also includes, after the creation is completed, saving the template data, and after the data is saved, deleting the data corresponding to the current idKey from the cache by calling IndexedDB.dbOperation(tempName, delete, idKey).

[0051] Furthermore, the types of persistence operations of the operation module include adding, deleting, modifying and querying.

[0052] Based on the same inventive concept, the present invention also provides a computer system, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the computer program is loaded into the processor, the steps of the method for persistent storage of network target range front-end data according to any one of the above items are implemented.

[0053] Based on the same inventive concept, the present invention also provides a computer program product, including a computer program / instruction, which, when executed by a processor, implements the steps of the network target range front-end data persistent storage method according to any of the above items.

[0054] Beneficial effect: Compared with the prior art, the present invention performs real-time persistent storage of training template data based on IndexedDB, opens a database connection through the open method of IndexedDB, and uses db.createObjectStore() to create a database collection in the callback method of connection.onupgradeneeded for opening the database link or when the version changes. Each time the user enters the training template information, a timer is started, and the IndexedDB.dbOperation(tempName,'add',data) method is used to send modification instructions to the database. The database processes the received instructions through objectStore[type](data), and finally obtains the returned result in the onsuccess callback, so that the user can retrieve the historically edited data when the training data is not saved or in unpredictable situations such as browser crashes. BRIEF DESCRIPTION OF THE DRAWINGS

[0055] Figure 1 is a flow chart of a method according to an embodiment of the present invention;

[0056] Figure 2 A flowchart of initializing a database according to an embodiment of the present invention;

[0057] Figure 3 The flowchart of various types of persistence operations performed in an embodiment of the present invention. DETAILED DESCRIPTION

[0058] The technical solution of the present invention will be clearly and completely described below in conjunction with the accompanying drawings and specific embodiments.

[0059] As attached Figure 1 As shown, a method for persistent storage of network range front-end data disclosed in an embodiment of the present invention includes the following steps:

[0060] Step 1: Initialize the IndexedDB database;

[0061] Step 2: Based on the initialized IndexedDB database, the user creates a network range training template, and passes different identification types to IndexedDB according to the different persistence operation types corresponding to the training template. IndexedDB creates corresponding databases for different training templates based on the received persistence operation type and the type of the network range training template, and performs various types of persistence operations on the data in the database; specifically,

[0062] Start the timer and use the IndexedDB.dbOperation() method to perform various types of operations to update the database data in real time;

[0063] Define the readType variable to determine the current operation mode;

[0064] Use res.transaction(storeName,readType).objectStore(storeName) to process the read and write permissions of data; storeName is the database name;

[0065] Use objectStore[type](data) to update the data in the database; type is the type of persistence operation, and data is the data in the database;

[0066] Use onsuccess or onerror to return the result of success or failure of database update.

[0067] The characteristics of IndexedDB data storage are:

[0068] 1. Key-value pair storage. IndexedDB uses an object store to store data. All types of data can be directly stored, including JavaScript objects. In the object store, data is stored in the form of "key-value pairs". Each data record has a corresponding primary key. The primary key is unique and cannot be repeated, otherwise an error will be thrown.

[0069] 2. Asynchronous. IndexedDB does not lock the browser during operation, and the user can still perform other operations, which is in contrast to LocalStorage, which operates synchronously. The asynchronous design is to prevent the reading and writing of large amounts of data from slowing down the performance of the web page.

[0070] 3. Support transactions. IndexedDB supports transactions, which means that if one step fails in a series of operation steps, the entire transaction will be canceled and the database will be rolled back to the state before the transaction. There is no situation where only part of the data is rewritten.

[0071] 4. Same-origin restrictions IndexedDB is subject to same-origin restrictions. Each database corresponds to the domain name where it was created. A web page can only access the database under its own domain name, and cannot access cross-domain databases.

[0072] 5. Large storage space IndexedDB's storage space is much larger than LocalStorage, generally not less than 250MB, and there is no upper limit.

[0073] 6. Support binary storage. IndexedDB can not only store strings, but also binary data (ArrayBuffer objects and Blob objects).

[0074] Storing data based on IndexedDB is divided into two processes. The first process is to initialize the database. The second process is to add, delete, modify, query and other operations on the data in the database based on the initialized database. When users input training template information, they need to distinguish whether it is an addition operation or an edit and update operation. Each time a different data operation is performed, a different identification type needs to be passed to IndexedDB to complete the corresponding operation. IndexedDB needs to create different databases for different training templates and perform different operations based on the received operation type and training template type.

[0075] In step 1, the process of initializing the database is to first obtain the indexedDB object through window.indexedDB. Different browsers need to be compatible. Use the open method of indexedDB to open a database connection. Use the onsuccess and onerror methods of connection to handle the return results of successful and failed database initialization. Use connection.onupgradeneeded to handle the logic of opening the link or version change of the IndexedDB database. For example, through db.createObjectStore('team',{keyPath:'id'}), a database with a database collection of red and a primary key of id is created. Using this method, you only need to call the method through IndexedDB.dbInit('team') to initialize a database. In the process of creating training templates, it is necessary to distinguish the types of templates to store different types of training data, such as single training or team training. You can customize the identifiers single and team to distinguish them.

[0076] const indexedDB=

[0077] window.indexedDB||

[0078] window.webkitindexedDB||

[0079] window.msIndexedDB||

[0080] window.mozIndexedDB; / / Compatibility processing

[0081] function dbInit(storeName){

[0082] return new Promise((resolve,reject)=>{

[0083] / / Open the database, if it doesn't exist, create a new one

[0084] / / indexedDB.open('cyber',3), the first parameter is the name of the database, the second parameter 3 is the version number, the default is 2

[0085] const connection=indexedDB.open('cyber',3);

[0086] connection.onblocked=function(event){

[0087] / / If some other pages have loaded the database, they need to be closed before we initialize

[0088] alert('Please close other pages using this database!');

[0089] };

[0090] connection.addEventListener('success',(event)=>{

[0091] const db=event.target.result;

[0092] db.addEventListener('versionchange',(event)=>{

[0093] console.log('The version of this database has changed');

[0094] });

[0095] });

[0096] / / Method for successful execution

[0097] connection.onsuccess=function(event){

[0098] resolve(event.target.result);

[0099] };

[0100] / /

[0101] connection.onupgradeneeded=function(event){

[0102] const db=event.target.result;

[0103] if(!db.objectStoreNames.contains(storeName)){

[0104] / / Create database sets single, team, red, topo, range for the database, where single means individual training, team means team training, red means red-blue confrontation, topo means topology template, range means shooting range evaluation, the primary key is id, and different database sets can be created as needed

[0105] db.createObjectStore('single',{keyPath:'id'});

[0106] db.createObjectStore('team',{keyPath:'id'});

[0107] db.createObjectStore('red',{keyPath:'id'});

[0108] db.createObjectStore('topo',{keyPath:'id'});

[0109] db.createObjectStore('range',{keyPath:'id'});

[0110] }

[0111] };

[0112] / / Failure callback

[0113] connection.onerror=function(err){

[0114] reject(err);

[0115] };

[0116] });

[0117] }

[0118] like Figure 2 As shown, the process of initializing the database is as follows:

[0119] N1: Create a connection through the IndexedDB.open method;

[0120] N2: Use connection.onupgradeneeded to handle the logic of opening the IndexedDB database link or version changes;

[0121] N3: Use db.createObjectStore() to create a database collection;

[0122] N4-1: Use onsuccess to return the result of successful database creation;

[0123] N4-2: Use onsuccess to return the result of database creation failure.

[0124] In step 2, based on the initialized database, when creating a training template, the user needs to operate the information in the database, distinguish what the operation is through different operation types, such as adding, modifying, deleting, querying, etc., and then tell the database to perform the corresponding operation to modify the information in the database. When creating training template information, users need to start a timer to transmit information to the database at regular intervals to tell the database to store information. For example, use IndexedDB.dbOperation('team','add',data) to call the dbOperation method. The first parameter 'team' indicates that the team training template is currently being created. The second parameter 'add' indicates the newly added operation. The third parameter data indicates all the data that has been entered to create the template. The second parameter operation type is used to determine whether the database is being read or written, or read-only (add, put, and delete are read-write operations, and get is a read-only operation). ReadType is defined to determine whether it is a read-write operation or a read-only operation. 'add', 'delete', and 'put' are read-write operations, and 'get' is a read-only operation. The database processes the read-write logic through res.transaction(storeName,readType).objectStore(storeName). Operations such as adding, modifying, and reading data are processed through objectStore[type](data) to process the requested operation mode, and the results are finally returned in the onsuccess callback.

[0125] function dbOperation(storeName,type,data){

[0126] let typeList = ['add', 'delete', 'put', 'get']; / / method name

[0127] / / If the value passed is not in this list, an error message will be displayed

[0128] if(!typeList.includes(type)){

[0129] throw new Error(`Operation type error, only supports: ${typeList.toString()} method`);

[0130] }

[0131] / / Transaction mode has two options: readonly or readwrite. The default is readonly mode, which only reads and writes data.

[0132] const readType=type==='add'||'delete'||'put'? 'readwrite':'readonly';

[0133] const res = await dbInit();

[0134] const objectStore=res.transaction(storeName,readType).objectStore(storeName);

[0135] const response=new Promise((resolve,reject)=>{

[0136] const request=objectStore[type](data);

[0137] request.onsuccess=(res)=>{

[0138] resolve(res.target.result);

[0139] };

[0140] request.onerror=(err)=>{

[0141] reject(err);

[0142] };

[0143] request.oncomplete=(event)=>{

[0144] alert('All done!');

[0145] };

[0146] });

[0147] return response;

[0148] }

[0149] like Figure 3 As shown, the process of performing various types of persistence operations is as follows:

[0150] P1: Start the timer and use the IndexedDB.dbOperation() method to update the database data in real time;

[0151] P2: Define the readType variable to determine whether the current operation is in read-write mode or read-only mode;

[0152] P3: Use res.transaction(storeName,readType).objectStore(storeName) to handle data read and write permissions;

[0153] P4: Use objectStore[type](data) to update the data in the database;

[0154] P5-1: Use onsuccess to return the result of successful database update;

[0155] P5-2: Use onsuccess to return the result of database update failure.

[0156] In this embodiment, creating a team training template requires filling in basic information, drawing a network topology, and building some tasks to be completed for the training. The creation process is divided into three steps: the first step is to fill in basic information, the second step is topology arrangement, and the third step is task arrangement;

[0157] The first page that users enter is the team training list page, which will display the team training templates that have been created. When users click Add, the page will use IndexedDB.dbOperation('team','get') to get whether the unsaved information can be queried. If the information is queried, it will prompt 'There are unsaved topologies or scenarios, do you want to restore?' If you confirm to restore, the unsaved data will be displayed; if you cancel the restore, it will jump to an empty team training template page, and then start a timer to call IndexedDB.dbOperation('team','add',data) in real time to store the input information in real time. The IndexedDB.dbOperation() method will use different parameters to distinguish whether it is a new template or an edit template. If it is a new template, the second parameter is add, and if it is an edit template, the second parameter is edit.

[0158] The first step in creating team training is to fill in the basic information. You need to enter the template name, template description information, select the training difficulty and training type, select the number of trainees, etc. Click Next to proceed to the second step of topology arrangement. Users can draw the network topology diagram according to their needs. For example, the user drags in a router, a switch and a terminal device, and connects the router and the terminal device to the switch to achieve network connection. The data of this process must also be stored through IndexedDB.dbOperation('team','add',data). Data stores the template data for the entire team training creation. After creating the template information, click Next to proceed to the third step of task arrangement. Add some tasks that need to be completed by the training template, such as some multiple-choice questions or true-or-false questions, which also need to be stored through IndexedDB.dbOperation('team','add',data). After filling in the information in the third step, you can click the Finish button to save the template information.

[0159] If the user initially chooses to restore unsaved data, a variable myCacheList is defined to record cache information, the existing data in myCacheList is displayed on the page, and the variable idKey is used to record the unique identifier id of the cache. In the subsequent use of IndexedDB.dbOperation('team','add',data) to store information, idKey will be placed in data to distinguish data. The user can click the Finish button in the third step to save the data. After the data is saved, the data corresponding to the current idKey is deleted from the cache by calling IndexedDB.dbOperation('team',delete,idKey). In this way, the user will not be prompted with "There are unsaved topologies or scenarios, do you want to restore?" when continuing to create training, and will directly jump to the blank template for creation. The user can view the training template he created by returning to the training template page.

[0160] Based on the same inventive concept, this embodiment also provides a network range front-end data persistent storage system, including:

[0161] Initialization module, used to initialize the IndexedDB database;

[0162] The operation module is used to allow users to create a network range training template based on the initialized IndexedDB database, and pass different identification types to IndexedDB according to different persistent operation types corresponding to the training template. IndexedDB creates corresponding databases for different training templates based on the received persistent operation type and the type of the network range training template, and performs various types of persistent operations on the data in the database; specifically,

[0163] Start the timer and use the IndexedDB.dbOperation() method to perform various types of operations to update the database data in real time;

[0164] Define the readType variable to determine the current operation mode;

[0165] Use res.transaction(storeName,readType).objectStore(storeName) to process the read and write permissions of data; storeName is the database name;

[0166] Use objectStore[type](data) to update the data in the database; type is the type of persistence operation, and data is the data in the database;

[0167] Use onsuccess or onerror to return the result of success or failure of database update.

[0168] Furthermore, the specific implementation method of the initialization module is:

[0169] Get the indexedDB object through window.indexedDB and make it compatible with different browsers;

[0170] Use the open method of indexedDB to open the database connection;

[0171] Use connection.onupgradeneeded to handle the logic of opening the IndexedDB database link or version changes;

[0172] Use db.createObjectStore() to create a database collection;

[0173] Use the onsuccess and onerror methods of the connection to handle the return results of successful and failed database initialization.

[0174] Furthermore, the operation module creates a training template for the network range, including adding a new training template, filling in basic information, drawing a network topology, and arranging training tasks;

[0175] The newly added team training template is specifically as follows: the user selects a newly added training template, and determines whether the information that was not saved last time can be queried through IndexedDB.dbOperation(tempName,'get'), where tempName is the template type, and the value is single, team, red, topo or range, which respectively represent individual training, team training, red-blue confrontation, topology template and shooting range evaluation; when it can be queried, ask whether to restore, and if you choose to restore, the data that was not saved last time will be displayed; if you do not restore or the information that was not saved last time is not queried, jump to the empty team training template, and start the timer to call IndexedDB.dbOperation(tempName,'add',data) to store the input information in real time, and use different parameters to distinguish whether it is a newly added template or an edited template. If it is a newly added template, the second parameter is confirmed to be add, and if it is an edited template, the second parameter is confirmed to be edit;

[0176] Filling in the basic information specifically includes entering the template name and template description information, selecting the training difficulty and training type, and selecting the number of trainees;

[0177] The network topology is drawn, and the user selects various types of network devices and terminal devices and realizes network connection, and the data in the process is stored through IndexedDB.dbOperation(tempName,'add',data);

[0178] The arrangement of the training tasks specifically includes adding corresponding tasks according to the training requirements and storing them through IndexedDB.dbOperation(tempName,'add',data);

[0179] The newly added training template also includes that when the user chooses to restore the data that was not saved last time, a variable myCacheList is defined to record the cache information, the existing data in myCacheList is displayed, and the variable idKey is used to record the unique identifier id of the cache, so that the subsequent use of IndexedDB.dbOperation (tempName, 'add', data) to store information will put idKey into data to distinguish the data;

[0180] The creation of the training template for the network target range also includes, after the creation is completed, saving the template data, and then deleting the data corresponding to the current idKey from the cache by calling IndexedDB.dbOperation(tempName, delete, idKey) after the data is saved.

[0181] Furthermore, the types of persistence operations of the operation module include adding, deleting, modifying and querying.

[0182] Based on the same inventive concept, this embodiment also provides a computer system, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the computer program is loaded into the processor, the steps of the method for persistent storage of network target range front-end data according to any one of the above items are implemented.

[0183] Based on the same inventive concept, this embodiment also provides a computer program product, including a computer program / instruction, which, when executed by a processor, implements the steps of the network range front-end data persistent storage method according to any of the above items.

Claims

1. A method for persistent storage of network range front-end data, characterized in that: The following steps are involved: Step 1: Initialize the IndexedDB database; Step 2: Based on the initialized IndexedDB database, the user creates a network range training template, and passes different identification types to IndexedDB according to the different persistence operation types corresponding to the training template. IndexedDB creates corresponding databases for different training templates based on the received persistence operation type and the type of the network range training template, and performs various types of persistence operations on the data in the database; specifically, Start the timer and use the IndexedDB.dbOperation() method to perform various types of operations to update the database data in real time; Define the readType variable to determine the current operation mode; Use res.transaction(storeName,readType).objectStore(storeName) to process the read and write permissions of data; storeName is the database name; Use objectStore[type](data) to update the data in the database; type is the type of persistence operation, and data is the data in the database; Use onsuccess or onerror to return the result of success or failure of database update.

2. The method for persistent storage of network range front-end data according to claim 1, characterized in that: Specifically, step 1 comprises: Get the indexedDB object through window.indexedDB and make it compatible with different browsers; Use the open method of indexedDB to open the database connection; Use connection.onupgradeneeded to handle the logic of opening the IndexedDB database link or version changes; Use db.createObjectStore() to create a database collection; Use the onsuccess and onerror methods of the connection to handle the return results of successful and failed database initialization.

3. The method for persistent storage of network range front-end data according to claim 1, characterized in that: Step 2: Create a training template for the network range, including adding a new training template, filling in basic information, drawing the network topology, and arranging training tasks; Specifically, the newly added training template is as follows: the user selects the newly added training template, and determines whether the information not saved last time can be queried through IndexedDB.dbOperation(tempName,'get'), where tempName is the template type, and the value is single, team, red, topo or range, which respectively represent individual training, team training, red-blue confrontation, topology template and shooting range evaluation; when it can be queried, ask whether to restore, and if you choose to restore, the data not saved last time will be displayed; if you do not restore or the information not saved last time is not queried, jump to the empty team training template, and start the timer to call IndexedDB.dbOperation(tempName,'add',data) to store the input information in real time, and distinguish whether it is a newly added template or an edited template through different parameters. If it is a newly added template, the second parameter is confirmed as add, and if it is an edited template, the second parameter is confirmed as edit; Filling in the basic information specifically includes entering the template name and template description information, selecting the training difficulty and training type, and selecting the number of trainees; The network topology is drawn, and the user selects various types of network devices and terminal devices and realizes network connection, and the data in the process is stored through IndexedDB.dbOperation(tempName,'add',data); The arrangement of the training tasks specifically includes adding corresponding tasks according to the training requirements and storing them through IndexedDB.dbOperation(tempName,'add',data); The newly added training template also includes that when the user chooses to restore the data that was not saved last time, a variable myCacheList is defined to record the cache information, the existing data in myCacheList is displayed, and the variable idKey is used to record the unique identifier id of the cache, so that the subsequent use of IndexedDB.dbOperation (tempName, 'add', data) to store information will put idKey into data to distinguish the data; The creation of the training template for the network target range also includes, after the creation is completed, saving the template data, and then deleting the data corresponding to the current idKey from the cache by calling IndexedDB.dbOperation(tempName, delete, idKey) after the data is saved.

4. The method for persistent storage of network range front-end data according to claim 1, characterized in that: The types of persistence operations described in step 2 include adding, deleting, modifying, and querying.

5. A network range front-end data persistent storage system, characterized in that: include: Initialization module, used to initialize the IndexedDB database; The operation module is used to allow users to create a network range training template based on the initialized IndexedDB database, and pass different identification types to IndexedDB according to different persistent operation types corresponding to the training template. IndexedDB creates corresponding databases for different training templates based on the received persistent operation type and the type of the network range training template, and performs various types of persistent operations on the data in the database; specifically, Start the timer and use the IndexedDB.dbOperation() method to perform various types of operations to update the database data in real time; Define the readType variable to determine the current operation mode; Use res.transaction(storeName,readType).objectStore(storeName) to process the read and write permissions of data; storeName is the database name; Use objectStore[type](data) to update the data in the database; type is the type of persistence operation, and data is the data in the database; Use onsuccess or onerror to return the result of success or failure of database update.

6. The network range front-end data persistent storage system according to claim 5 is characterized in that: The specific implementation method of the initialization module is: Get the indexedDB object through window.indexedDB and make it compatible with different browsers; Use the open method of indexedDB to open the database connection; Use connection.onupgradeneeded to handle the logic of opening the IndexedDB database link or version changes; Use db.createObjectStore() to create a database collection; Use the onsuccess and onerror methods of the connection to handle the return results of successful and failed database initialization.

7. The network range front-end data persistent storage system according to claim 5 is characterized in that: The operation module creates a training template for the network range, including adding a new training template, filling in basic information, drawing a network topology, and arranging training tasks; Specifically, the newly added training template is as follows: the user selects the newly added training template, and determines whether the information not saved last time can be queried through IndexedDB.dbOperation(tempName,'get'), where tempName is the template type, and the value is single, team, red, topo or range, which respectively represent individual training, team training, red-blue confrontation, topology template and shooting range evaluation; when it can be queried, ask whether to restore, and if you choose to restore, the data not saved last time will be displayed; if you do not restore or the information not saved last time is not queried, jump to the empty team training template, and start the timer to call IndexedDB.dbOperation(tempName,'add',data) to store the input information in real time, and distinguish whether it is a newly added template or an edited template through different parameters. If it is a newly added template, the second parameter is confirmed as add, and if it is an edited template, the second parameter is confirmed as edit; Filling in the basic information specifically includes entering the template name and template description information, selecting the training difficulty and training type, and selecting the number of trainees; The network topology is drawn, and the user selects various types of network devices and terminal devices and realizes network connection, and the data in the process is stored through IndexedDB.dbOperation(tempName,'add',data); The arrangement of the training tasks specifically includes adding corresponding tasks according to the training requirements and storing them through IndexedDB.dbOperation(tempName,'add',data); The newly added training template also includes that when the user chooses to restore the data that was not saved last time, a variable myCacheList is defined to record the cache information, the existing data in myCacheList is displayed, and the variable idKey is used to record the unique identifier id of the cache, so that the subsequent use of IndexedDB.dbOperation (tempName, 'add', data) to store information will put idKey into data to distinguish the data; The creation of the training template for the network target range also includes, after the creation is completed, saving the template data, and then deleting the data corresponding to the current idKey from the cache by calling IndexedDB.dbOperation(tempName, delete, idKey) after the data is saved.

8. The network range front-end data persistent storage system according to claim 5 is characterized in that: The types of persistence operations of the operation module include adding, deleting, modifying and querying.

9. A computer system comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the computer program is loaded into the processor, the steps of the method for persistent storage of network range front-end data are implemented according to any one of claims 1 to 4.

10. A computer program product comprising a computer program / instructions, characterized in that When the computer program / instruction is executed by the processor, the steps of the method for persistent storage of network range front-end data according to any one of claims 1 to 4 are implemented.

Images