纯JS实现突破LocalStorage上限的无限本地存储方案

项目开源与原理概述

时隔两年，终于有空将此前承诺开源的纯JavaScript实现无限容量本地存储的功能代码公开。

项目源码托管于https://github.com/xueduany/localstore，

在线演示地址为http://xueduany.github.io/localstore/，

下文简要阐述其核心原理，具体细节与异常处理将在后续文章中单独说明。

突破LocalStorage限制的核心机制

首先解析突破LocalStorage限制的原理，参考W3C规范原文http://www.w3.org/TR/2013/PR-webstorage-20130409/，

利用不同子域名下LocalStorage数据互不干扰的特性，通过聚合多个子域名的存储空间来设计实现一个StorePool，从而突破单一域名的存储上限。

在实际API调用时，数据存储不再直接针对当前域名的LocalStorage进行保存。

该机制类似于Manager模式：用户告知管理员要保存的数据，管理员分配一把钥匙，用户将数据存入指定的仓库（子域名空间），管理员随后返回一个Token凭证。此后，用户只需持有该凭证即可取出之前保存的数据。

最终用户无需关心数据具体存储位置，只需实现与LocalStorage相似的API接口即可。

因此，设计一个JavaScript对象来充当仓库管理员角色，该对象需支持管理Token数量，并记录每个Token对应的数据存储位置（即具体子域名下的空间），为此需要设计一套相应的数据结构。

在对应的Key下，存储其所在仓库的地址以及保存时间。保存时间的概念用于计算数据的新鲜度，即判断数据是否过期。

因此，首先需要创建多个iframe来加载各个域名下的代理文件，通过HTML5的postMessage API或旧的跨域页面交互方式，利用这些proxy代理来保存数据。

在当前主域名下仅保存数据的Key存根，而实际数据则分散保存在各个子域名下。

网页资源离线化与替换策略

Ok，既然突破了存储上限，若要保存整个网页，需考虑拉取网页相关的所有静态资源。对于JS、CSS等文本资源，通常通过Ajax请求即可获取内容，唯一需考虑的是跨域安全性问题，这可能导致JS无法获取响应数据。此时，只需在CDN节点服务器上设置响应头为

即可实现跨域获取内容。

对于JS，将<script src="url"></script>改为<script>远程获取的内容</script>即可；对于CSS，将<link rel="stylesheet" href="url">改为<style>内容</style>即可。

这里只需考虑能匹配到原HTML中这些代码块的情况，需注意一个问题：JS的RegExp默认是贪婪模式，因此我们的正则表达式需做到最小匹配。

然后找到HTML中对应的内容，将其替换为已保存在LocalStorage中的内容即可。

那么对于图片，如何获取其内容呢？我们知道图片是RawData（二进制数据），首先需要解决获取图片二进制流的问题。

然后通过FileReader直接将其转换为Base64格式，即可保存在本地，随后将图片的src从URL替换为一段Base64字符串即可。

接着，将整个网页HTML中对应的资源替换为我们特殊的标记。

LOCALSTORE标记，然后通过递归查找算法，从各个子Store中获取内容，还原拼接成原来的完整HTML。

然后直接通过document.write来还原原来的页面。

离线浏览与SinglePage应用实现

通过这种原理，你可以将一个网站离线化到本地，然后基于SinglePage技术，实现不发任何请求的浏览。当然，这里面还有一些其他技术细节需要处理，具体有哪些坑，且听我下回分解！！！。

以上所述就是本文的全部内容了，希望大家能够喜欢。