CN107329910A - 一种基于localStorage的Web前端数据本地存储和访问方法 - Google Patents

Abstract

本发明公开了一种基于localStorage的Web前端数据本地存储和访问方法，(1)根据数据类型将存储区域划分为四个区域，并设计新的数据存储格式，将从磁盘中读取数据转换为从内存对象中读取数据，以此解决localStorage频繁读取数据性能低下的问题；(2)localStorage存储数据时超出存储空间上限就会抛出错误，导致程序终止，出现写不了的情况，针对此项缺陷在每个存储区域增加一个order数组，存储各数据的key值，基于LRU算法根据数据的使用时间排序，首部数据标记为“无用数据”，从前期预防和后期监控两个方面设计空间写满错误处理机制，及时清除“无用数据”，腾出空间，保证数据的正常写入。

Description

一种基于localStorage的Web前端数据本地存储和访问方法

技术领域

本发明涉及一种基于localStorage的Web前端数据本地存储和访问方法。

背景技术

随着Web2.0的到来，Web应用程序的内容发生了变化，由发布-阅读模式逐步向用户- 关系模式转型，对页面加载时间的要求日益升高，用户体验与用户评价已成为评价***优劣的一个重要指标。虽然现在部分网站可以通过服务器集群来提高***性能，但费用很高，难以负担，在此形势下，研究人员另辟蹊径，从客户端浏览器着手，在不增加硬件成本的基础上，同样达到提高***性能的效果。

网络的发展以及前端相关技术的发展，新的前端架构产生，新的开发标准不断完善，国内外的一些知名互联网企业也一直密切关注着客户端的存储，将更多的人和资源放到了本地存储技术方案的探究中。特别是HTML5^[1]规范的发布，其中的新特性，例如WebStorage、 IndexedDB和Web SQL Database等相关的技术^[2-4]，无需安装任何插件，运用到不同的实际场景中，为前端开发领域掀起了一场新的“革命”。

使用本地缓存可从减少HTTP请求数、减少页面总资源大小和提高页面加载效率三个方面来提升网站性能^[5]。目前本地存储的技术很多，例如cookie、userData和localStorage等。通过对各项存储技术进行分析比较，HTML5的localStorage优势明显。

localStorage^[6]有独立的存储空间，扩展了本地的存储容量，大部分主流浏览器已实现兼容，有简单易用的API，它的存储内容不会被发送到服务器上，不与服务器进行交互，并且拥有事件监听机制，可以监控数据变化情况。

localStorage中的数据会保存在客户端的硬盘上，或者是其它的存储器上，数据会永久保存，除非自己手动删除数据。Web Storage为localStorage提供了的接口WebStorage API^[7]，比cookie的接口更丰富易用，数据操作也更为简便。Web Storage API是一种典型的key-value 的数据结构^[8]，提供了接口对数据进行操作。localStorage的使用原则是：如果localStorage 缓存存在就使用，不存在就直接加载，就是所谓的平稳退化(或渐进增强)。localStorage目前还存在许多不足之处。有实验表明，当访问的数据量相同时，localStorage读取一条大数据的时间约为1ms，但是多次读取等量的小数据所花费的时间则是读取一条大数据的几十倍，也就是说使用localStorage频繁读取数据，会导致程序性能下降。此外，由于localStorage是永久性存储，数据的使用期限无法控制，因此需要设计一个过期机制；而且浏览器为localStorage分配的存储空间是有限制的，默认为5MB，如果有新数据进来，空间不够时，会抛出QuotaExceededError错误，出现“写不了”的情况。

因此，针对localStorage存在频繁读取数据性能低下的问题、数据使用期限的问题和空间写满报错程序终止的问题，有必要深入研究localStorage，设计一套基于localStorage的本地存储优化方案。

发明内容

本发明所解决的技术问题是，针对现有技术的不足，提供一种基于localStorage的Web 前端数据本地存储和访问方法，选用各项存储技术中优势明显的localStorage缓存数据，并且能够克服其不足，改善存储性能。

本发明所提供的技术方案为：

一种基于localStorage的Web前端数据本地存储方法，包括以下步骤：

步骤1、根据缓存数据类型将浏览器为localStorage分配的存储空间划分为多个存储区域；

步骤2、设计新的数据存储格式，将数据存储模式从key-value模式转变为areaName-JSONObj模式；

areaName-JSONObj模式包含areaName和JSONObj两部分，areaName表示区域名；JSONObj表示JSON对象数据；JSONObj采用key-obj的形式表示，每个key对应一个obj，即对象，对象包含两个属性：1)value：存储的数据内容；2)expTime：数据存储的终止时间；

步骤3、设计新的localStorage接口LS，将其包装为JS插件在***中使用，将从磁盘中读取数据转换为从内存对象中读取数据。

进一步地，所述步骤1中，将浏览器为localStorage分配的存储空间划分为四个存储区域，如表1所示：

表1本地存储区域划分表

区域名	说明
		JC_LS	存储JS、CSS、HTML等文件
Img_LS	存储静态图片资源
		Db_LS	存储从数据库中读取的数据
Pub_LS	存储公共数据

进一步地，所述步骤3中，新的localStorage接口LS提供的方法如表2所示：

表2 LS提供的方法

进一步地，针对存储空间写满错误，设置两种解决方案：1)写入预防：localStorage写入数据时，计算空间是否已写满或者写入该数据导致空间写满，若是，则基于LRU算法清除“无用数据”，腾出空间；2)错误监控：对QuotaExceededError错误进行监听，一旦捕捉到该错误，则基于LRU算法清除“无用数据”，腾出空间。

LRU(Least recently used,最近最少使用)算法的实现步骤为：

S1、在每个存储区域里设置一个order项，即在localStorage中存储一条key值为“order”、 value值为数组的数据，用来存储每条数据的key值，该数组以数据的使用时间从小到大进行排序；

S2、存储新数据时，将其对应的key值添加到该存储区域的order项的数组的最末端；

S3、访问或者更新数据时，则将该数据对应的key值移动到数组的最末端；

S4、将数组前端的key值对应的数据标记为“无用数据”；需要释放存储空间时，根据数组首端的key值删除对应数据。

本发明还提供了一种基于localStorage的Web前端数据访问方法，数据以上述方法进行存储；访问数据时，首先判断数据存储区域，然后使用LS提供的方法将对应存储区域的数据一次性取出，并转换为JSON对象，存入内存变量中，再对内存变量进行相应的操作。

进一步地，使用LS提供的getData()方法将对应存储区域的数据一次性取出。

进一步地，在获取数据时，得到相应的字符串，即value后，使用JSON的parse()方法，把value转化为JSON对象。

进一步地，对内存变量进行相应的操作具体为：

1)使用get(key,data)获取数据，判断key是否存在，若key不存在，则转步骤3)；若key存在，则转步骤2)；

2)根据数据的expTime字段判断数据是否已过期，若是，则直接删除数据，不允许进行访问，并转步骤3)；否则，返回对应的数据；

3)返回undefined。

有益效果：

本发明针对localStorage目前存在的频繁读取时性能下降、数据的使用期限无法控制、存储空间超限错误的三个缺陷，从数据格式设计和空间写满处理机制两方面提出了一套优化方案。首先是根据数据类型对存储区域进行分区设计，并设计了一种新的数据存储格式 areaName-JSONObj，以此为基础设计了新的localStorage的接口LS，将从磁盘中读取数据转换为从内存对象中读取数据，解决localStorage频繁读取数据性能低下的问题；数据使用期限的问题。然后针对localStorage存储数据时超出存储空间上限就会抛出QuotaExceededError 错误，导致程序终止，出现“写不了”的情况，在每个存储区域增加一个order数组，存储各数据的key值，基于LRU算法根据数据的使用时间排序，首部数据标记为“无用数据”，从前期预防和后期监控两个方面设计空间写满错误处理机制，及时清除“无用数据”，腾出空间，保证数据的正常写入。实验表明，通过对本地存储方案的改进，使得Web应用性能更优。

附图说明

图1 localStorage的数据存储模式

图2本发明改进的localStorage的数据存储模式

图3访问数据的过程设计

图4 localStorage在各浏览器的存储上限

图5各存储方案的访问速度对比

图6有无缓存页面响应时间比较

具体实施方式

以下结合附图和具体实施方式对本发明进行进一步具体说明。

本发明的主要步骤及原理为：

1划分存储区域

网站页面主要包含静态资源和动态资源两个部分。静态资源主要是JS、CSS、图片甚至是HTML页面等资源，动态资源主要是与后台进行交互的各类数据。而适合使用localStorage 进行缓存的数据主要包括三类：(1)JS、CSS、HTML文件和图片等，适合存储变动频率不大的此类型文件，加载页面时可直接从缓存中读取；(2)缓存公用数据，例如页面标题、广告等；(3)缓存从数据库中读取的基本保持不变的数据。视频等空间较大的文件容易超出存储空间上限，无法使用localStorage存储。因此，根据缓存数据类型将浏览器为localStorage分配的存储空间划分为四个存储区域，如表1所示。

表1本地存储区域划分表

区域名	说明
		JC_LS	存储JS、CSS、HTML等文件
Img_LS	存储静态图片资源
		Db_LS	存储从数据库中读取的数据
Pub_LS	存储公共数据

2设计新数据存储格式

localStorage采用key-value的模式存储数据，value的值必须为字符串类型(传入非字符串,也会在存储时转换为字符串，故只能存储字符串类型的数据)，如图1所示。

结合步骤1中的分区技术，本发明将原始的存储模式，即key-value模式转变为areaName-JSONObj模式。如图2所示，areaName-JSONObj模式包含areaName和JSONObj 两部分，areaName表示区域名；JSONObj表示JSON对象数据；JSONObj采用key-obj的形式表示，每个key对应一个obj，即对象，对象包含两个属性：1)value：存储的数据内容；2) expTime：数据存储的终止时间。在localStorage中，数据只能以字符串形式存储，不能直接以数组和对象形式存储。因此，在存储数据时，需要使用JSON(JavaScript Object Notation， JS对象标记，是一种轻量级的数据交换格式)的stringify()方法把JSON对象转换成字符串进行存储，该字符串即对应图2中的“value”。在获取数据时，得到相应的字符串后(即图2 中的“value”)，使用JSON的parse()方法，把value转化为JSON对象。在每个存取区域内包含多个JSON子对象，以分区+数据项的模式存储数据，数据形式为 {areaName:{key:value,……},……}，。

基于改进的存储格式，本发明设计了新的localStorage接口LS，将其包装为JS插件在***中使用，其与原始接口比较如表2所示。

表2 LS和localStorage提供的方法的比较

访问数据时，首先使用getData()将对应存储区域的数据一次性取出，转换为JSON对象，

存入内存变量中，对内存变量进行相应的操作。具体数据访问过程如图3所示。

图在图3的过程中，由于本发明还未实现自动化识别数据所属区域，目前只能人工进行判断。判断数据是否过期是根据expTime字段实现的，expTime字段中存储的数值是毫秒级别的数据，所以在读取数据时，需要将当前时间的转换为毫秒级的数据，与expTime字段中存储的数值进行比较。一旦超限，则直接删除数据，不允许进行访问。

在实际场景中，需要频繁获取大批量的数据时，根据上述的分区规则，在使用localStorage 存入数据时，全部分配在同一区域内，假设在Db_LS中。根据上述设计的访问方案分析可知，在访问数据时，首先使用getData()方法将Db_LS区域内的所有数据取出来，转化成JSON对象，存入内存变量中，使用get(key,data)从内存变量中获取目标数据，最后进行各项操作。也就是说，在需要多次获取同类数据时，使用该方案只需要从localStorage中进行一次磁盘访问操作，然后操作内存变量，大量减少了磁盘访问时间。此方案的设计将从磁盘中访问数据转换为从内存变量中访问数据，而从内存变量中读取数据的速度比从磁盘中读取数据的速度快得多，由此可以解决localStorage频繁读取数据的低性能问题。

3空间写满错误处理机制

localStorage的存储容量在500万字符左右，一旦写满，会抛出QuotaExceededError错误，出现“写不了”的情况。目前的处理方法是选择手动清除所有缓存，处理的效率十分低下，大部分有用的资源也随之被清除，下次程序运行时需要重新加载，该处理过程过于简单粗暴，影响其它功能的操作。对于localStorage的存储容量，各个浏览器支持的限额各有不同，所以本发明首先对各个浏览器的存储限额做了测试，通过网页工具-Test of localStorage limits/ quota测试得到各浏览器的存储容量，结果如图4所示。

从图中可以看出，各个浏览器为localStorage分配的存储容量存在很大差距，存储容量且因浏览器版本的不同也会有所变化，由此会造成写满错误抛出的不可控。本发明选择通过统一设置空间上限、检测已用空间大小并限制写入数据大小、及时清除无用数据，尽量避免抛出写满错误，保证存储功能的正常运行。依据HTML5本地存储中localStorage的存储空间大小默认为5MB，本发明在应用测试中设置localStorage的存储容量为5MB，设置其它容量上限也可以，对本发明技术方法实现无影响。但如果容量上限太小，将会影响数据读取速度，从而降低页面响应速度。

针对存储空间写满错误，设置有两种解决方案：(1)写入预防：localStorage写入数据时，计算空间是否已写满或者写入该数据导致空间写满，若是，则基于LRU算法清除“无用数据”，腾出空间；(2)错误监控：对QuotaExceededError错误进行监听，一旦捕捉到该错误，则基于 LRU算法清除“无用数据”，腾出空间。

LRU(Least recently used，最近最少使用)算法的实现步骤如下：

(1)在每个存储区域里设置一个order项，即在localStorage中存储一条key值为“order”、 value值为数组数据，用来存储每条数据的key值，该数组以数据的使用时间从小到大进行排序；

(2)存储新数据时，将其对应的key值添加到该存储区域的order项的数组的最末端；

(3)访问或者更新数据时，则将该数据对应的key值移动到数组的最末端。

(4)执行上述步骤后，order数组可以按要求正确排序，数组前端的key值对应的数据就是近期最少使用的数据，标记为“无用数据”。在需要释放存储空间时只需要根据数组首端的 key值删除对应数据就可以满足要求。

4实验及结果分析

对本发明提出的优化方案进行性能测试，通过实验验证该方案的可行性，主要从新数据存储格式的繁读取数据性能、使用缓存方案对页面性能的影响两方面进行验证。

4.1新数据存储格式下频繁读取数据的性能评估

本发明设计了新的数据存储格式来解决localStorage频繁读取数据性能低下的问题，该实验用来设计验证新的数据存储格式的正确性和高性能，实验使用Chrome 52浏览器进行操作。预先在存储区域存储相同数量的数据，并且每条数据的大小保持一致，分别使用本发明的方案和直接使用localStorage访问相同的数据量，记录其所消耗的时间。实验结果如图5所示。

由图5可以看出，使用本发明设计的新的数据存储格式访问数据时，所花费的时间比直接使用localStorage方法访问时要少几倍，并且，访问的数据越多，两者的差距越大，在数据量为50000时，新方案花费的时间比旧方案少了约7倍的时间，也就是说，使用改进的方案，访问数据量越大，访问时间越少，访问速度更快，性能更佳。那么，为什么会造成这两种方案的性能存在如此大的差异？

localStorage方法所存储的数据是放在硬盘上的，从localStorage读取多少次数据，就需要从硬盘上读取多少次数据。由于CPU只能直接访问内存中的数据，所以从硬盘上读取数据首先需要从硬盘中找到该数据，然后将其传输到内存中，如此才能进行访问操作。这也就意味着，从localStorage中读取一次数据的时间等于磁盘中数据查找的时间和数据传输时间之和。

本发明的改进方案是先取出某区域内所有数据，然后转换为JSON对象进行取值，这一过程中只需要从localStorage中取一次数据。这样的话，本发明的方案访问数据的总时间等于从localStorage中访问一次数据的时间与从JSON对象中取值的时间之和。从JSON对象中取值时，是由JS代码运行的，浏览器在加载页面时，会将JS代码加载到为浏览器分配的内存中，那么从JSON中获取数据就相当于只需要从内存中获取数据。表3是从JSON对象中访问数据量与所需花费的时间的关系表示。

表3从JSON中访问数据的次数与访问时间的关系表

JSON中访问的数据所占字符数与使用图5的实验访问数据所占字符数相同，并且一次只访问一条数据，所以访问数据个数与访问次数是等价的。将表3中的数据与图5中使用改进方案的数据进行比较，在访问数据量相同的情况下从JSON中访问数据的访问时间与改进方案中所消耗的访问时间相比较，相差1ms左右，这也就意味着本方案的访问时间消耗在从 JSON中获取数据这一步骤上，而从localStorage中访问一次大数据的时间只需要1ms左右。

通过上述分析，可以得出结论：造成两种方案的差距如此之大的原因在于从JSON对象中读取数据的速度比从localStorage读取数据的速度快。改进的方案大大减少了直接从 localStorage中获取数据的次数。因此，对于需要对某类数据进行频繁访问时，使用本发明设计的方案降低访问负担，减少访问时间。对于每优化一毫秒，就能提高6％的Web前端性能来说，本发明设计的方案的效果显著，是可行的。

4.2优化存储方案的性能分析

衡量Web前端的性能指标主要有页面加载时间(User Latency或Site Speed)进行考量，它是衡量应用程序可用性的一个重要指标，指的是页面从加载开始到加载完成所消耗的时间，该指标可以从整体上反映应用程序的访问速度，并且本发明的方案是通过对页面加载过程中的客户端渲染阶段进行性能优化的。

该实验使用MyEclipse 8.5进行开发，Tomcat 7作为Web服务器，MySQL 5.5作为数据库，IE9作为测试浏览器，使用HttpWatch记录实验结果，外在实验环境保持一致。

该实验为了简化操作，只是简单的设计了一个首页main.jsp，页面元素包含JS文件、CSS 文件和图片等，为了减少实验误差，除了存储方案不同外，其他的页面数据和相关条件均保持一致，整个实验过程中只打开该页面，最大程度的保证各个实验产生的差距是由实验设置的关键因素造成的，尽量保证实验的准确性。

首先测试的是不同的数据类型在使用本发明的缓存优化方案和无缓存的条件下的加载时间。本地缓存的数据主要有JS文件、CSS文件和图片，每次只单独存储一种类型，分别测试这三种文件的载入时间。各资源在使用缓存前后的加载时间情况如表4所示。

表4不同数据类型的缓存效果

通过对上表的结果分析，使用缓存机制，浏览器不需从服务器加载资源，直接从本地缓存中获取资源，众所周知，操作本地内存中的资源比操作服务器上的资源的速度高多个数量级，因此优化方案可加速网页各项元素载入的时间，速度提升了数倍，从而可以减少页面的总加载时间，效果显著。

另外，对整个页面的响应时间进行实验，实验场景分为使用本发明的存储方案进行数据存储和直接获取数据，无任何缓存。

两种场景下缓存的数据保持一致，每完成一种情况的测试，清除所有缓存，页面其他元素保持不变，记录首次访问和之后访问4次的页面加载时间，实验结果如表5所示。

表5页面响应时间比较(单位：s)

根据上述结果，绘制对比折线图，如图6所示。

在首次访问页面时，使用本发明改进的缓存方案时，由于存储数据的各项操作的消耗，加载时间加长。第二次访问时，应用本发明的缓存方案，加载页面的响应时间比不使用缓存减少了大约50％，相比首次访问页面的时间明显降低，这是因为在首次请求后，页面的部分数据已被缓存，而后续在加载页面时，页面的加载时间与第二次访问时基本无变化。

参考文献：

[1]Lubbers P,Salim F,Albers B.Pro HTML5programming.USA:Apress,2011.5-304.

[2]张紫薇.Web前端性能优化的研究与应用[D].成都：电子科技大学,2010.

[3]尹乐,许刚强.基于HTML5的离线Web应用设计与实现[J].中国高新技术企业,2014,(12):17-19.

[4]刘继.HTML5中ExtJS和Web SQL Database的使用[J].信息通信,2015,(09):129-130.

[5]王成,李少元,郑黎晓,缑锦,曾梅琴,刘慧敏.Web前端性能优化方案与实践[J].计算机应用与软件,2014,(12):89-95+147.

[6]Bruce Lawson,Remy Sharp.HTML5用户指南[M].机械工业出版社.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.一种基于localStorage的Web前端数据本地存储方法，其特征在于，包括以下步骤：

步骤1、根据缓存数据类型将浏览器为localStorage分配的存储空间划分为多个存储区域；

步骤2、设计新的数据存储模式，将数据存储模式从key-value模式转变为areaName-JSONObj模式；

areaName-JSONObj模式包含areaName和JSONObj两部分，areaName表示区域名；JSONObj表示JSON对象数据；JSONObj采用key-obj的形式表示，每个key对应一个obj，即对象，对象包含两个属性：1)value：存储的数据内容；2)expTime：数据存储的终止时间；

步骤3、设计新的localStorage接口LS，将其包装为JS插件在***中使用，将从磁盘中读取数据转换为从内存对象中读取数据。

2.根据权利要求1所述的基于localStorage的Web前端数据本地存储方法，其特征在于，，所述步骤1中，将浏览器为localStorage分配的存储空间划分为四个存储区域，如表1所示：

表1 本地存储区域划分表

区域名 说明 JC_LS 存储JS、CSS、HTML等文件 Img_LS 存储静态图片资源 Db_LS 存储从数据库中读取的数据 Pub_LS 存储公共数据

3.根据权利要求1所述的基于localStorage的Web前端数据本地存储方法，其特征在于，所述步骤3中，新的localStorage接口LS提供的方法如表2所示：

表2 LS提供的方法

4.根据权利要求1所述的基于localStorage的Web前端数据本地存储方法，其特征在于，针对存储空间写满错误，设置写入预防机制：localStorage写入数据时，计算空间是否已写满或者写入该数据导致空间写满，若是，则基于LRU算法清除“无用数据”，腾出空间。

5.根据权利要求1所述的基于localStorage的Web前端数据本地存储方法，其特征在于，针对存储空间写满错误，设置错误监控机制：对QuotaExceededError错误进行监听，一旦捕捉到该错误，则基于LRU算法清除“无用数据”，腾出空间。

6.根据权利要求4或5所述的基于localStorage的Web前端数据本地存储方法，其特征在于，LRU算法的实现步骤为：

S1、在每个存储区域里设置一个order项，即在localStorage中存储一条key值为“order”、value值为数组的数据，用来存储每条数据的key值，该数组以数据的使用时间从小到大进行排序；

S2、存储新数据时，将其对应的key值添加到该存储区域的order项的数组的最末端；

S3、访问或者更新数据时，则将该数据对应的key值移动到数组的最末端；

S4、需要释放存储空间时，根据数组首端的key值删除对应数据。

7.一种基于localStorage的Web前端数据访问方法，其特征在于，数据以权利要求1～6中任一项所述的方法进行存储；访问数据时，首先判断数据存储区域，然后使用LS提供方法将对应存储区域的数据一次性取出，并转换为JSON对象，存入内存变量中，再对内存变量进行相应的操作。

8.根据权利要求7所述的基于localStorage的Web前端数据访问方法，其特征在于，使用LS提供的getData()方法将对应存储区域的数据一次性取出。

9.根据权利要求8所述的基于localStorage的Web前端数据访问方法，其特征在于，在获取数据时，得到相应的字符串，即value后，使用JSON的parse()方法，把value转化为JSON对象。

10.根据权利要求8所述的基于localStorage的Web前端数据访问方法，其特征在于，对内存变量进行相应的操作具体为：

1)使用get(key,data)获取数据，判断key是否存在，若key不存在，则转步骤3)；若key存在，则转步骤2)；

2)根据数据的expTime字段判断数据是否已过期，若是，则直接删除数据，不允许进行访问，并转步骤3)；否则，返回对应的数据；

3)返回undefined。