纯js实现无限空间大小的本地存储

好久没写博客了。我以为我两年前就答应发布源代码了，没有发布。最近终于有时间用纯js开源实现无限空间本地存储的功能了。

项目地址：https://github.com/xueduany/localstore,

演示遇到http://xueduany.github.io/localstore/.

我给大家简单说一下大概原理，具体细节和异常处理就有机会单独谈了

我们来谈谈突破本地存储的原理。官方原话是http://www.w3.org/TR/2013/PR-webstorage-20130409/

因此，您知道，可以使用多个子域的localStorage，通过多个子域的localStorage来设计和实现一个storePool，突破了上限

然后，当应用编程接口被实际存储时，它不是本地本地存储

这有点类似于Manager模式，就是你告诉仓管员你想存什么，仓管员给你一把钥匙，然后你拿着钥匙去对应的仓库寄存你的东西，管理员给你一个代币凭证。以后只要你持有这个证书，你就可以取出保存的东西

最终用户不必关心我的数据存储在哪里，只需实现像localStorage这样的API

然后设计一个js对象作为仓库管理员。管理员需要支持存储多少令牌，以及对应保存的东西存储在哪里，也就是在哪个子域名称下的空间，那么我们就需要设计和实现这样的数据结构。

对应的键下面是它所在仓库的地址，以及存放时间。存储时间的概念用于计算数据的新鲜度，即计算数据是否过期

因此，我们必须首先创建多个iframe来加载多个域名下的代理文件，并通过HTML5 api postMessage或旧页面跨域的方式相互交互，通过这个代理的代理来保存数据

将数据的密钥存根保存在当前主域名下，然后将实际数据保存在每个子域名下

好了，现在我们已经超过了存储限制，我们需要保存一个网页，我们需要考虑拉下所有与网页相关的静态资源。对于与网页相关的资源，包括js和css，这些都是文本，很简单。只要发出ajax请求，就可以获得内容。唯一要考虑的是安全性，因为跨域问题，js无法获取响应数据。这里，只需在CDN节点服务器上设置响应头即可。

也就是说，跨域获取内容

Js，即script src="URL" /script，只能更改为通过script、css、linkrel="样式表" href="URL "远程获取的内容/脚本，只能更改为样式内容/样式

在这里，我们只需要考虑这些可以匹配原始html的代码块，只需要考虑一个问题，那就是js的regexp默认是贪婪的，所以我们的正则性应该是最小匹配。

然后在html中找到相应的内容，并用已经保存在localStorage中的内容替换它

那么如何获取图片的内容呢？我们知道图片是原始数据，二进制的。首先，我们要解决获取图片二进制流的问题

然后通过fileReader直接转换成base64，可以本地保存，然后把图片的src从url替换成base64的字符串

然后用我们的特殊标签替换整个网页的html中对应的资源

LOCALSTORE标记，然后通过递归搜索算法，从每个子存储中获取内容，并将其还原为原始完整的html

然后直接通过document恢复原始页面

有了这个原理，你就可以把一个网站离线到本地，然后基于singlePage技术，无需任何请求就可以浏览。当然，还有一些其他的技术细节需要处理。有哪些坑？下次让我来分解它们！

以上就是本文的全部内容，希望大家喜欢。