[发明专利]一种基于localStorage的Web前端数据本地存储和访问方法

说明书

技术领域

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

背景技术

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

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

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

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

localStorage中的数据会保存在客户端的硬盘上，或者是其它的存储器上，数据会永久保存，除非自己手动删除数据。Web Storage为localStorage提供了的接口Web Storage 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：数据存储的终止时间；