CN107329910A - A kind of web front end data based on localStorage are locally stored and access method - Google Patents
A kind of web front end data based on localStorage are locally stored and access method Download PDFInfo
- Publication number
- CN107329910A CN107329910A CN201710502913.7A CN201710502913A CN107329910A CN 107329910 A CN107329910 A CN 107329910A CN 201710502913 A CN201710502913 A CN 201710502913A CN 107329910 A CN107329910 A CN 107329910A
- Authority
- CN
- China
- Prior art keywords
- data
- localstorage
- storage
- key
- web front
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F12/00—Accessing, addressing or allocating within memory systems or architectures
- G06F12/02—Addressing or allocation; Relocation
- G06F12/08—Addressing or allocation; Relocation in hierarchically structured memory systems, e.g. virtual memory systems
- G06F12/0802—Addressing of a memory level in which the access to the desired data or data block requires associative addressing means, e.g. caches
- G06F12/0893—Caches characterised by their organisation or structure
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F12/00—Accessing, addressing or allocating within memory systems or architectures
- G06F12/02—Addressing or allocation; Relocation
- G06F12/08—Addressing or allocation; Relocation in hierarchically structured memory systems, e.g. virtual memory systems
- G06F12/12—Replacement control
- G06F12/121—Replacement control using replacement algorithms
- G06F12/123—Replacement control using replacement algorithms with age lists, e.g. queue, most recently used [MRU] list or least recently used [LRU] list
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
It is locally stored and access method the invention discloses a kind of web front end data based on localStorage, (1) storage region is divided into by four regions according to data type, and design new data memory format, data will be read from disk and be converted to and data are read from memory object, solving localStorage with this frequently reads the problem of data performance is low；(2) it will be dished out mistake beyond the memory space upper limit during localStorage data storages, cause program determination, there is situation about not writing, increase an order array in each storage region for this defect, store the key values of each data, sorted based on lru algorithm according to the use time of data, header data is labeled as " hash ", full error handling mechanism is write in design space in terms of primary prevention and later stage monitor two, remove " hash " in time, vacating space, it is ensured that data are normally written.
Description
Technical field
It is locally stored and access method the present invention relates to a kind of web front end data based on localStorage.
Background technology
With Web2.0 arrival, the content of web application is changed, from issue-reading model progressively to
Family-relation schema transition, the requirement to page load time is increasingly raised, and Consumer's Experience is evaluated to turn into user evaluates system
One important indicator of quality of uniting.Although present part website can improve systematic function, expense by server cluster
Very high, it is difficult to bear, under this situation, researcher looks for another way, and sets about from client browser, is not increasing hardware cost
On the basis of, equally reach the effect for improving systematic function.
The development of network and the development of front end correlation technique, new front end structure are produced, and new exploitation standard is constantly complete
Kind, some well-known Internet enterprises both domestic and external also pay close attention to the storage of client always, and more people and resource are put
To being locally stored in the probing into of technical scheme.Particularly HTML5[1]The issue of specification, such as new features therein, Web
The related technologies such as Storage, IndexedDB and Web SQL Database[2-4], without installing any plug-in unit, apply to not
It is that front end development field has started new " revolution " in same actual scene.
Can be from reduction HTTP request number, reduction page total resources size and raising page loading efficiency three using local cache
Individual aspect lifts web site performance[5].The technology that is locally stored at present is a lot, such as cookie, userData and
LocalStorage etc..By carrying out com-parison and analysis to every memory technology, HTML5 localStorage is with the obvious advantage.
localStorage[6]There is independent memory space, extend local memory capacity, most of major browsers
Compatibility has been realized, has there is API easy to use, its storage content will not be sent on server, do not handed over server
Mutually, and action listener mechanism is possessed, can be with monitoring data situation of change.
Data in localStorage can be stored on the hard disk of client, or on other memories, data
Meeting persistence, unless oneself deletes data manually.The interface Web that Web Storage provide for localStorage
Storage API[7], the interface than cookie is more rich easy-to-use, and data manipulation is also more easy.Web Storage API are one
Plant typical key-value data structure[8]Data are operated there is provided interface.LocalStorage's uses original
It is then：Used if localStorage cachings are present, be exactly so-called steady degenerate (or gradually in the absence of being just loaded directly into
Enter enhancing).Also there are many weak points at present in localStorage.There is experiment to show, when the data volume of access is identical,
The time that localStorage reads a big data is about 1ms, but the time that the small data for repeatedly reading equivalent is spent
It is then read a big data tens times, that is to say, that frequently read data using localStorage, can cause procedural
It can decline.Further, since localStorage is permanent storage, the useful life of data is uncontrollable, it is therefore desirable to design
One expiration mechanism；And browser is that the memory space that localStorage is distributed is conditional, is defaulted as 5MB, if
There is new data to come in, when space is inadequate, can dish out QuotaExceededError mistakes, the situation for " not writing " occur.
Therefore, exist for localStorage and frequently read the problem of data performance is low, data useful life and ask
The problem of full error-reporting routine is terminated is write in topic and space, it is necessary to further investigate localStorage, designs a set of be based on
LocalStorage's is locally stored prioritization scheme.
The content of the invention
Technical problem solved by the invention is to be based on localStorage there is provided one kind in view of the shortcomings of the prior art
Web front end datas be locally stored and access method, cached from localStorage with the obvious advantage in every memory technology
Data, and it can be overcome not enough, improve storage performance.
Technical scheme provided by the present invention is：
Method is locally stored in a kind of web front end data based on localStorage, comprises the following steps：
Step 1, according to data cached type by browser be localStorage distribute memory space be divided into it is multiple
Storage region；
The new data memory format of step 2, design, be from key-value Mode changes by data model storage
AreaName-JSONObj patterns；
AreaName-JSONObj patterns include areaName and JSONObj two parts, and areaName represents area-name；
JSONObj represents JSON object datas；Pair JSONObj represented in the form of key-obj, one obj of each key correspondences, i.e.,
As object includes two attributes：1)value：The data content of storage；2)expTime：The termination time of data storage；
The new localStorage interface LS of step 3, design, are packaged as JS plug-in units and are used in systems, will be from magnetic
Reading data are converted in disk reads data from memory object.
Further, in the step 1, the memory space that browser is localStorage distribution is divided into four and deposited
Storage area domain, as shown in table 1：
The local storage region of table 1 divides table
| Area-name | Explanation |
| JC_LS | Store the files such as JS, CSS, HTML |
| Img_LS | Store static images resource |
| Db_LS | Store the data read from database |
| Pub_LS | Store common data |
Further, in the step 3, the method that new localStorage interfaces LS is provided is as shown in table 2：
The method that the LS of table 2 is provided
Further, full mistake is write for memory space, two kinds of solutions is set：1) write-in prevention：
When localStorage writes data, calculate whether space has been write full or writing the data causes space to be write completely, if so, then base
" hash " is removed in lru algorithm, vacating space；2) error monitoring：QuotaExceededError mistakes are monitored,
Once capturing the mistake, then " hash " is removed based on lru algorithm, vacating space.
The step of realizing of LRU (Least recently used, least recently used) algorithm is：
S1, the setting one order in each storage region, i.e., one key value of storage is in localStorage
" order ", value values are the data of array, for storing the key values of every data, the array with the use time of data from
It is small to being ranked up greatly；
When S2, storage new data, its corresponding key value is added to the most end of the array of the order items of the storage region
End；
S3, when accessing or updating the data, then the corresponding key values of the data are moved to the least significant end of array；
S4, by the corresponding data markers of key values of array front end be " hash "；When needing release memory space, root
Corresponding data is deleted according to the key values of array head end.
Present invention also offers a kind of web front end data access method based on localStorage, data are with above-mentioned side
Method is stored；When accessing data, data storage areas is first determined whether, then will correspondence storage region using the LS methods provided
Data disposably take out, and be converted to JSON objects, in deposit memory variable, then memory variable operated accordingly.
Further, the getData () method provided using LS is disposably taken out the data of correspondence storage region.
Further, when obtaining data, obtain after corresponding character string, i.e. value, use JSON parse () sides
Value, is converted into JSON objects by method.
Further, corresponding operation is carried out to memory variable is specially：
1) data are obtained using get (key, data), judges that key whether there is, if key is not present, go to step 3)；If
Key is present, then goes to step 2)；
2) judge whether data are out of date according to the expTime fields of data, if so, then directly deleting data, do not allow
Conduct interviews, and go to step 3)；Otherwise, corresponding data are returned；
3) undefined is returned.
Beneficial effect：
Hydraulic performance decline during the frequent reading that the present invention presently, there are for localStorage, data useful life can not
Control, three defects of memory space overrun error, are proposed in terms of full treatment mechanism two is write in data format design and space
A set of prioritization scheme.It is that zoning design is carried out to storage region according to data type first, and devises a kind of new data and deposit
Form areaName-JSONObj is stored up, new localStorage interface LS is devised based on this, will be read from disk
Access evidence is converted to reads data from memory object, solves localStorage and frequently reads the problem of data performance is low；
The problem of data useful life.It will be dished out beyond the memory space upper limit when being then directed to localStorage data storages
QuotaExceededError mistakes, cause program determination, and the situation for " not writing " occur increases by one in each storage region
Individual order arrays, store the key values of each data, are sorted based on lru algorithm according to the use time of data, header data mark
For " hash ", full error handling mechanism is write in design space in terms of primary prevention and later stage monitor two, and " nothing is removed in time
With data ", vacating space, it is ensured that data are normally written.Experiment shows, passes through the improvement to scheme is locally stored so that Web
Application performance is more excellent.
Brief description of the drawings
Fig. 1 localStorage data model storage
The improved localStorage of Fig. 2 present invention data model storage
Fig. 3 accesses the Process Design of data
Storage caps of Fig. 4 localStorage in each browser
The access speed contrast of each storage schemes of Fig. 5
Fig. 6 whether there is caching the page response time compare
Embodiment
The present invention is described in more detail below in conjunction with the drawings and specific embodiments.
The present invention key step and principle be：
1 divides storage region
Website page mainly includes two parts of static resource and dynamic resource.Static resource is mainly JS, CSS, picture
The even resource such as html page, dynamic resource is mainly the Various types of data interacted with backstage.And be adapted to use
The data that localStorage is cached mainly include three classes：(1) JS, CSS, html file and picture etc., are adapted to storage and become
The little this type file of dynamic frequency, can read during loading page directly from caching；(2) public data, such as page are cached
Title, advertisement etc.；(3) data being held essentially constant read from database are cached.The larger file in the spaces such as video holds
Easily exceed the memory space upper limit, it is impossible to store using localStorage.Therefore, it is by browser according to data cached type
The memory space of localStorage distribution is divided into four storage regions, as shown in table 1.
The local storage region of table 1 divides table
| Area-name | Explanation |
| JC_LS | Store the files such as JS, CSS, HTML |
| Img_LS | Store static images resource |
| Db_LS | Store the data read from database |
| Pub_LS | Store common data |
2 design new data storage formats
LocalStorage uses key-value pattern data storage, and value value is necessary for character string type (biography
Enter non-character string, also can be converted to character string in storage, therefore the data of character string type can only be stored), as shown in Figure 1.
With reference to the partitioning technique in step 1, the present invention is by original memory module, i.e. key-value Mode changes are
AreaName-JSONObj patterns.As shown in Fig. 2 areaName-JSONObj patterns include areaName and JSONObj two
Point, areaName represents area-name；JSONObj represents JSON object datas；JSONObj represented in the form of key-obj, often
Individual key correspondences one obj, i.e. object, object include two attributes：1)value：The data content of storage；2) expTime：Number
According to the termination time of storage.In localStorage, data can only be stored with character string forms, it is impossible to direct with array and right
Pictograph formula is stored.Therefore, in data storage, it is necessary to use JSON (JavaScript Object Notation, JS objects
Mark, be a kind of data interchange format of lightweight) stringify () method JSON objects be converted into character string carry out
Storage, the character string is " value " in corresponding diagram 2.When obtaining data, obtain after corresponding character string (i.e. in Fig. 2
" value "), using JSON parse () method, value is converted into JSON objects.Comprising many in each accessing zone
Individual JSON subobjects, with the pattern data storage of subregion+data item, data mode is { areaName:{key:
Value ... ... } ... ... },.
Based on improved storage format, the present invention devises new localStorage interface LS, is packaged as JS and inserted
Part is used in systems, and it is compared as shown in table 2 with clean interface.
The comparison for the method that the LS of table 2 and localStorage is provided
When accessing data, the data of correspondence storage region are disposably taken out first by getData (), JSON is converted to
Object,
It is stored in memory variable, memory variable is operated accordingly.Specific data access process is as shown in Figure 3.
Figure, at present can only be artificial because automatic identification data affiliated area is also not implemented in the present invention during Fig. 3
Judged.Judge data it is whether expired be to be realized according to expTime fields, the numerical value stored in expTime fields is milli
The data of second rank, so when reading data, it is necessary to by the data for being converted to Millisecond of current time, with expTime words
The numerical value stored in section is compared.Once transfiniting, then data are directly deleted, are not allowed access for.
, it is necessary to when frequently obtaining large batch of data, according to above-mentioned zoning ordinance, use in actual scene
When localStorage is stored in data, all distribution is in the same area, it is assumed that in Db_LS.According to the access of above-mentioned design
Program analysis is understood, when accessing data, is taken out all data in Db_LS regions first by getData () method
Come, change into JSON objects, deposit memory variable, target data is obtained from memory variable using get (key, data), most
After carry out operations.That is, need repeatedly obtain homogeneous data when, using the program only need to from
A disk access operation is carried out in localStorage, memory variable is then operated, substantially reduce the number disk access time.This
The design of scheme will access data from disk and be converted to accesses data from memory variable, and data are read from memory variable
Speed ratio read from disk data speed it is faster, it is possible thereby to which solving localStorage frequently reads the low of data
Performance issue.
Write full error handling mechanism in 3 spaces
LocalStorage memory capacity, once writing full, can dish out in 5,000,000 characters or so
QuotaExceededError mistakes, the situation for " not writing " occur.Current processing method is to select to remove all delay manually
Deposit, the efficiency of processing is very low, most of useful resource is also eliminated therewith, need to add again during lower secondary program operation
Carry, the processing procedure is excessively simple and crude, influence the operation of other functions.For localStorage memory capacity, each
The limit that browser is supported is had nothing in common with each other, so storage limit of the present invention first to each browser is tested, passes through net
Page instrument-Test of localStorage limits/ quota tests obtain the memory capacity of each browser, as a result such as Fig. 4
It is shown.
It can be seen that the memory capacity that each browser, which is localStorage, to be distributed has very big gap, deposit
Storage capacity and difference because of browser version can be also varied from, thus can cause to write that full mistake dishes out is uncontrollable.The present invention
Selection by the unified installation space upper limit, detect and with space size and limit write-in size of data, remove hash in time,
Avoid dishing out as far as possible and write full mistake, it is ensured that the normal operation of store function.It is locally stored middle localStorage's according to HTML5
Storage size is defaulted as 5MB, and the present invention sets localStorage memory capacity to be 5MB in application test, set
Other maximum sizes can also, on the technology of the present invention method realize without influence.But if maximum size is too small, it will influence data
Reading speed, so as to reduce page response speed.
Full mistake is write for memory space, two kinds of solutions are provided with：(1) write-in prevention：LocalStorage writes
During data, calculate whether space has been write full or writing the data causes space to be write completely, if so, then removing " nothing based on lru algorithm
With data ", vacating space；(2) error monitoring：QuotaExceededError mistakes are monitored, once capture the mistake
By mistake, then " hash " is removed based on lru algorithm, vacating space.
LRU (Least recently used, least recently used) algorithm realizes that step is as follows：
(1) one order are set in each storage region, i.e., a key value is stored in localStorage is
" order ", value values are array data, for storing the key values of every data, and the array is with the use time of data from small
To being ranked up greatly；
(2) when storing new data, its corresponding key value is added to the most end of the array of the order items of the storage region
End；
(3) when accessing or update the data, then the corresponding key values of the data are moved to the least significant end of array.
(4) perform after above-mentioned steps, order arrays can be correctly ordered on request, the corresponding number of key values of array front end
According to being exactly least recently used data, labeled as " hash ".Only needed to when needing release memory space according to array
The key values of head end, which delete corresponding data, can just meet requirement.
4 experiments and interpretation of result
Performance test is carried out to prioritization scheme proposed by the present invention, by the feasibility of the experimental verification program, mainly from
Numerous reading data performance of new data storage format, verified for the use of influence two of the buffering scheme to page performance.
The Performance Evaluation of data is frequently read under 4.1 new data storage formats
The present invention devises new data memory format, and to solve localStorage, frequently to read data performance low
Problem, the experiment is used for the correctness and high-performance of the new data memory format of design verification, and experiment is browsed using Chrome 52
Device is operated.The data of identical quantity are stored in storage region in advance, and the size of every data is consistent, and is made respectively
Identical data volume is accessed with the solution of the present invention and directly using localStorage, its time consumed is recorded.Experiment
As a result it is as shown in Figure 5.
As seen from Figure 5, when the new data memory format designed using the present invention accesses data, the time spent
Than directly using few several times during localStorage way access, also, the data of access are more, both gaps are bigger,
When data volume is 50000, about 7 times of time fewer than old scheme time that new departure is spent, that is to say, that using improved
Scheme, access data volume is bigger, and access time is fewer, and faster, performance is more preferably for access speed.So, why can cause this two
There is so big difference in the performance of the scheme of kind
The data that localStorage methods are stored are placed on hard disk, and how many number of times read from localStorage
According to, it is necessary to how many times data are read from hard disk.The data in internal memory can only be directly accessed due to CPU, so from hard disk
Data are read firstly the need of the data are found from hard disk, are then transmitted in internal memory, so can just conduct interviews operation.
This also implies that the time that a data are read from localStorage is equal to the time of data search and data in disk
Transmission time sum.
The improvement project of the present invention is first to take out all data in certain region, is then converted into JSON objects and carries out value,
Only need to take a data from localStorage during this.Like this, the solution of the present invention accesses the total of data
Time is equal to the time that a data are accessed from localStorage and the time sum of the value from JSON objects.From JSON
In object during value, run by JS codes, JS codes can be loaded into as browser assignment by browser in loading page
Internal memory in, then from JSON obtain data be equivalent to only need to obtain data from internal memory.Table 3 is from JSON objects
Access data volume and the relation of the time of required cost is represented.
Table 3 accesses the number of times and the relation table of access time of data from JSON
Number of characters shared by the data accessed in JSON is identical with number of characters shared by the experiment access data using Fig. 5, and
A data is once only accessed, so it is of equal value to access data amount check with access times.It will make in data and Fig. 5 in table 3
Be compared with the data of improvement project, access data volume identical in the case of from JSON access data access time with
The access time consumed in improvement project compares, difference 1ms or so, and this also implies that the access time consumption of this programme
On the step for data are obtained from JSON, and the time that a big data is accessed from localStorage only needs to 1ms
Left and right.
Pass through above-mentioned analysis, it can be deduced that conclusion：The reason for causing the gap of two schemes so big is from JSON
The speed that the speed ratio that data are read in object reads data from localStorage is fast.Improved plan is greatly reduced directly
The number of times of data is obtained from localStorage.When therefore, for needing frequently to access certain class data, this is used
The scheme reduction of invention design accesses burden, reduces access time.For every one millisecond of optimization, the web front end with regard to 6% can be improved
For performance, the effect for the scheme that the present invention is designed is feasible significantly.
The performance evaluation of 4.2 optimization storage schemes
Weighing the performance indications of web front end mainly has page load time (User Latency or Site Speed) progress
Consider, it is an important indicator for weighing application availability, refer to that the page completes to be disappeared since loading to loading
The time of consumption, the index can reflect the access speed of application program on the whole, and the solution of the present invention is by page
Client rendering stage in the loading procedure of face carries out performance optimization.
The experiment is developed using MyEclipse 8.5, and Tomcat 7 is used as number as Web server, MySQL 5.5
According to storehouse, IE9 records experimental result as test browser using HttpWatch, and external experimental situation is consistent.
The experiment simply simply devises a homepage main.jsp to simplify operation, and page elements include JS texts
Part, CSS files and picture etc., in order to reduce experimental error, in addition to storage scheme is different, other page datas and correlation
Condition is consistent, and the page is only opened in whole experiment process, farthest ensures that the gap that each experiment is produced is
Caused by the key factor of Setup Experiments, ensure the accuracy of experiment as far as possible.
What is tested first is different data types under conditions of using the cache optimization scheme of the present invention and without caching
Load time.The data of local cache mainly have JS files, CSS files and picture, and a type is only individually stored every time, point
The loading time of these three files is not tested.Load time situation of each resource before and after using caching is as shown in table 4.
The caching effect of the different types of data of table 4
By the interpretation of result to upper table, using caching mechanism, browser is not required to load resource from server, directly from this
Resource is obtained in ground caching, it is well known that the resource in operation local memory is high more than the speed of the resource on operation server
The individual order of magnitude, therefore prioritization scheme can accelerate the time that the every element of webpage is loaded into, speed improves several times, so as to reduce
Total load time of the page, effect is notable.
In addition, being tested to the response time of full page, experiment scene is divided into be entered using the storage scheme of the present invention
Row data storage and directly acquisition data, without any caching.
The data cached under two kinds of scenes are consistent, and often complete a kind of test of situation, remove all cachings, the page its
His element keeps constant, and record accesses and accesses the page load time of 4 times afterwards first, and experimental result is as shown in table 5.
The page response time of table 5 compares (unit：s)
According to the above results, contrast line chart is drawn, as shown in Figure 6.
In accession page first, during using improved buffering scheme of the invention, due to the operations of data storage
Consumption, the load time lengthens.During back-call, using the buffering scheme of the present invention, the response time ratio of loading page does not make
About 50% is reduced with caching, the time compared to accession page first substantially reduces, because after asking first, the page
Partial data be buffered, it is and follow-up in loading page, it is substantially unchanged when the load time of the page and back-call.
Bibliography：
[1]Lubbers P,Salim F,Albers B.Pro HTML5programming.USA:Apress,2011.5-
304.
[2] research of Zhang Ziwei .Web performance of front end optimization and application [D] Chengdu：University of Electronic Science and Technology, 2010.
[3] the offline Web applications design of Yin Le, perhaps firm based on HTML5 and realization [J] tech enterprises in China,
2014,(12):17-19.
[4] Liu is after use [J] the information communication of ExtJS and Web SQL Database in .HTML5,2015, (09):
129-130.
[5] king is into Li Shaoyuan, Zheng Lixiao, Gou is bright and beautiful, Zeng Meiqin, the quick .Web performance of front end prioritization schemes of Liu Hui and practice
[J] computer applications and software, 2014, (12):89-95+147.
[6] Bruce Lawson, Remy Sharp.HTML5 users' guidebook [M] China Machine Press .2011.
[7]Ian Hickson.Web Storage Editor’s Draft 17January 2014[EB/OL].
[2014-01-17].http:// dev.w3.org/html5/webstorage/.
[8]Oehlman D,Blanc S.Pro Android Web Apps.USA:Apress,2011.47-63。
Claims (10)
1. method is locally stored in a kind of web front end data based on localStorage, it is characterised in that comprise the following steps：
Step 1, the memory space according to data cached type by browser for localStorage distribution are divided into multiple storages
Region；
Step 2, the new data model storage of design, by data model storage from key-value Mode changes be areaName-
JSONObj patterns；
AreaName-JSONObj patterns include areaName and JSONObj two parts, and areaName represents area-name；
JSONObj represents JSON object datas；Pair JSONObj represented in the form of key-obj, one obj of each key correspondences, i.e.,
As object includes two attributes：1)value：The data content of storage；2)expTime：The termination time of data storage；
The new localStorage interface LS of step 3, design, are packaged as JS plug-in units and are used in systems, will be from disk
Reading data are converted to reads data from memory object.
2. method is locally stored in the web front end data according to claim 1 based on localStorage, its feature exists
In, it is that the memory space that localStorage is distributed is divided into four storage regions, such as table 1 by browser in the step 1
It is shown：
The local storage region of table 1 divides table
3. method is locally stored in the web front end data according to claim 1 based on localStorage, its feature exists
In in the step 3, the method that new localStorage interfaces LS is provided is as shown in table 2：
The method that the LS of table 2 is provided
4. method is locally stored in the web front end data according to claim 1 based on localStorage, its feature exists
In writing full mistake for memory space, set write-in prevention mechanism：When localStorage writes data, whether space is calculated
Write full or writing the data causes space to be write completely, if so, " hash " is then removed based on lru algorithm, vacating space.
5. method is locally stored in the web front end data according to claim 1 based on localStorage, its feature exists
In writing full mistake for memory space, set error monitoring mechanism：QuotaExceededError mistakes are monitored, one
Denier captures the mistake, then removes " hash " based on lru algorithm, vacating space.
6. method is locally stored in the web front end data based on localStorage according to claim 4 or 5, its feature
It is, the step of realizing of lru algorithm is：
S1, the setting one order in each storage region, i.e., one key value of storage is in localStorage
" order ", value values are the data of array, for storing the key values of every data, the array with the use time of data from
It is small to being ranked up greatly；
When S2, storage new data, its corresponding key value is added to the least significant end of the array of the order items of the storage region；
S3, when accessing or updating the data, then the corresponding key values of the data are moved to the least significant end of array；
S4, need release memory space when, according to the key values of array head end deletion corresponding data.
7. a kind of web front end data access method based on localStorage, it is characterised in that data are with claim 1~6
Any one of method stored；When accessing data, data storage areas is first determined whether, then method is provided using LS
The data of correspondence storage region are disposably taken out, and are converted in JSON objects, deposit memory variable, then memory variable is entered
The corresponding operation of row.
8. the web front end data access method according to claim 7 based on localStorage, it is characterised in that make
The getData () method provided with LS disposably takes out the data of correspondence storage region.
9. the web front end data access method according to claim 8 based on localStorage, it is characterised in that
When obtaining data, obtain after corresponding character string, i.e. value, using JSON parse () method, value is converted into
JSON objects.
10. the web front end data access method according to claim 8 based on localStorage, it is characterised in that right
Memory variable carries out corresponding operation：
1) data are obtained using get (key, data), judges that key whether there is, if key is not present, go to step 3)；If key
In the presence of then going to step 2)；
2) judge whether data are out of date according to the expTime fields of data, if so, then directly deleting data, do not allow to carry out
Access, and go to step 3)；Otherwise, corresponding data are returned；
3) undefined is returned.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710502913.7A CN107329910A (en) | 2017-06-27 | 2017-06-27 | A kind of web front end data based on localStorage are locally stored and access method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710502913.7A CN107329910A (en) | 2017-06-27 | 2017-06-27 | A kind of web front end data based on localStorage are locally stored and access method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN107329910A true CN107329910A (en) | 2017-11-07 |
Family
ID=60197452
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710502913.7A Pending CN107329910A (en) | 2017-06-27 | 2017-06-27 | A kind of web front end data based on localStorage are locally stored and access method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107329910A (en) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109948094A (en) * | 2017-10-17 | 2019-06-28 | 中移(苏州)软件技术有限公司 | A kind of WEB page loading method and device |
| CN110162412A (en) * | 2018-02-14 | 2019-08-23 | 北京京东尚科信息技术有限公司 | In the method and apparatus that client carries out data manipulation |
| CN110389781A (en) * | 2019-05-31 | 2019-10-29 | 平安国际智慧城市科技股份有限公司 | Localstorage cache implementing method, device and storage medium based on Version Control |
| CN111381917A (en) * | 2018-12-29 | 2020-07-07 | 阿里巴巴集团控股有限公司 | Data reading and writing method and device |
| CN111586103A (en) * | 2020-04-08 | 2020-08-25 | 北京明略软件系统有限公司 | File fragment downloading method and device |
| CN112073405A (en) * | 2020-09-03 | 2020-12-11 | 中国平安财产保险股份有限公司 | Webpage data loading method and device, computer equipment and storage medium |
| CN113626483A (en) * | 2021-08-18 | 2021-11-09 | 重庆允成互联网科技有限公司 | Front-end caching method, system, equipment and storage medium for filling forms |
| CN118535389A (en) * | 2024-07-24 | 2024-08-23 | 苏州瑞云智服信息科技有限公司 | LocalStorage data abnormal deletion protection method based on iOS APP end |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102932696A (en) * | 2012-09-29 | 2013-02-13 | 西安空间无线电技术研究所 | Satellite-borne high-speed data multiplexer system and realizing method thereof |
| CN103294700A (en) * | 2012-02-24 | 2013-09-11 | 腾讯科技（北京）有限公司 | Cross-browser data local storage method and device |
| US20130346542A1 (en) * | 2012-06-21 | 2013-12-26 | International Business Machines Corporation | Common web accessible data store for client side page processing |
-
2017
- 2017-06-27 CN CN201710502913.7A patent/CN107329910A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103294700A (en) * | 2012-02-24 | 2013-09-11 | 腾讯科技（北京）有限公司 | Cross-browser data local storage method and device |
| US20130346542A1 (en) * | 2012-06-21 | 2013-12-26 | International Business Machines Corporation | Common web accessible data store for client side page processing |
| CN102932696A (en) * | 2012-09-29 | 2013-02-13 | 西安空间无线电技术研究所 | Satellite-borne high-speed data multiplexer system and realizing method thereof |
Non-Patent Citations (1)
| Title |
|---|
| 周璐: "基于Web前端的localStorage性能研究与改进", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (13)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109948094B (en) * | 2017-10-17 | 2021-07-23 | 中移(苏州)软件技术有限公司 | WEB page loading method and device |
| CN109948094A (en) * | 2017-10-17 | 2019-06-28 | 中移(苏州)软件技术有限公司 | A kind of WEB page loading method and device |
| CN110162412A (en) * | 2018-02-14 | 2019-08-23 | 北京京东尚科信息技术有限公司 | In the method and apparatus that client carries out data manipulation |
| CN110162412B (en) * | 2018-02-14 | 2024-05-17 | 北京京东尚科信息技术有限公司 | Method and device for performing data operation on client |
| CN111381917A (en) * | 2018-12-29 | 2020-07-07 | 阿里巴巴集团控股有限公司 | Data reading and writing method and device |
| CN110389781A (en) * | 2019-05-31 | 2019-10-29 | 平安国际智慧城市科技股份有限公司 | Localstorage cache implementing method, device and storage medium based on Version Control |
| CN111586103A (en) * | 2020-04-08 | 2020-08-25 | 北京明略软件系统有限公司 | File fragment downloading method and device |
| CN112073405A (en) * | 2020-09-03 | 2020-12-11 | 中国平安财产保险股份有限公司 | Webpage data loading method and device, computer equipment and storage medium |
| CN112073405B (en) * | 2020-09-03 | 2024-02-06 | 中国平安财产保险股份有限公司 | Webpage data loading method and device, computer equipment and storage medium |
| CN113626483A (en) * | 2021-08-18 | 2021-11-09 | 重庆允成互联网科技有限公司 | Front-end caching method, system, equipment and storage medium for filling forms |
| CN113626483B (en) * | 2021-08-18 | 2022-04-26 | 重庆允成互联网科技有限公司 | Front-end caching method, system, equipment and storage medium for filling forms |
| CN118535389A (en) * | 2024-07-24 | 2024-08-23 | 苏州瑞云智服信息科技有限公司 | LocalStorage data abnormal deletion protection method based on iOS APP end |
| CN118535389B (en) * | 2024-07-24 | 2024-10-11 | 苏州瑞云智服信息科技有限公司 | LocalStorage data abnormal deletion protection method based on iOS APP end |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107329910A (en) | A kind of web front end data based on localStorage are locally stored and access method | |
| US10785322B2 (en) | Server side data cache system | |
| US20090307329A1 (en) | Adaptive file placement in a distributed file system | |
| US8868595B2 (en) | Enhanced control to users to populate a cache in a database system | |
| CN109240946A (en) | The multi-level buffer method and terminal device of data | |
| RU2638726C1 (en) | Optimized browser reproduction process | |
| CN105183839A (en) | Hadoop-based storage optimizing method for small file hierachical indexing | |
| CN104580437A (en) | Cloud storage client and high-efficiency data access method thereof | |
| CN106354732B (en) | A kind of off-line data version conflict solution for supporting concurrently to cooperate with | |
| CN104516920A (en) | Data inquiry method and data inquiry system | |
| CN110191168A (en) | Processing method, device, computer equipment and the storage medium of online business datum | |
| CN104111898A (en) | Hybrid storage system based on multidimensional data similarity and data management method | |
| CN107665219A (en) | A kind of blog management method and device | |
| CN110163268A (en) | A kind of image processing method, device and server, storage medium | |
| CN107704573A (en) | A kind of intelligent buffer method coupled with business | |
| CN103177080A (en) | File pre-reading method and file pre-reading device | |
| CN110008197A (en) | A kind of data processing method, system and electronic equipment and storage medium | |
| CN107463313A (en) | A kind of method of preloaded list | |
| CN106649150A (en) | Cache management method and device | |
| CN112148736A (en) | Method, device and storage medium for caching data | |
| CN114428776B (en) | Index partition management method and system for time series data | |
| Lim et al. | Androtrace: framework for tracing and analyzing IOs on Android | |
| CN111427920A (en) | Data acquisition method, device, system, computer equipment and storage medium | |
| CN116680276A (en) | Data tag storage management method, device, equipment and storage medium | |
| US11928093B2 (en) | Object data stored out of line vector engine |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20171107 |
|
| RJ01 | Rejection of invention patent application after publication |