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

久违的博客更新，我一直记得两年前承诺要分享的本地无限大小存储的源代码。今天，我终于可以将其开源，并和大家分享其实现的原理。

让我们关注这个项目背后的技术原理。我们利用的是浏览器中的localStorage，一个被广泛应用在前端开发的存储机制。我们所实现的功能已经突破了官方的限制。如何实现突破呢？答案就在于子域名的localStorage。每个子域名下的localStorage是独立的，不与其他子域名共享数据。我们可以通过创建多个子域名并利用其localStorage来实现一个无限大小的存储池。

这个过程有点像仓库管理员的模式。用户将数据交给仓库管理员，管理员将数据存放在不同的仓库中并给用户发放凭证。用户在需要取回数据时，只需使用凭证即可。在我们的场景中，仓库管理员就是我们的JS对象，它负责管理所有的存储令牌和对应的数据存放位置。

接下来，我们需要解决的是如何安全地跨域保存数据的问题。我们创建了多个iframe来加载不同域名的代理文件，并通过HTML5的api postMessage或者其他页面交互方式来进行数据交互。通过这种方式，我们可以在主域名下保存数据的key，而在各个子域名下保存实际的数据。这就实现了数据的分布式存储，突破了localStorage的存储上限。

当我们需要保存一个网页时，除了基本的HTML内容外，还需要保存网页相关的静态资源，如js、css等。这些资源可以通过简单的ajax请求获取。对于图片资源，我们可以通过FileReader将其转换为base64字符串进行保存。然后，我们将整个网页中的资源替换为特殊的标记（如LOCALSTORE标记），并通过递归查找算法从各个子store中获取内容，还原成完整的HTML页面。通过document.write来还原页面内容。

通过这种方式，我们可以实现网站的离线化，并基于singlePage技术实现无请求的浏览体验。这背后还有许多技术细节需要处理和完善。关于这些技术细节和可能遇到的挑战，我会在后续的文章中详细。

希望这次的分享能让大家对本地无限大小存储的实现原理有更深入的理解。如有任何疑问或建议，欢迎随时与我交流。让我们共同前端技术的无限可能！