视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
纯js实现无限空间大小的本地存储_javascript技巧
2020-11-27 21:39:34 责编:小采
文档
好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,

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

demo见http://xueduany.github.io/localstore/,

下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说

先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstorage-20130409/

所以你懂的,你可以利用多个子域名的localStorage是不互相依赖的性质,来通过多个子域名的localStorage来设计实现一个storePool,突破上限

那么,在实际API存储的时候,就不是对本地localStorage的保存了

这有点类似一个Manager模式,就是你告诉仓库管理员你要保存什么,仓库管理员给你一把钥匙,然后你拿着钥匙去对应的仓库把你的东西托管起来,管理员再给你一个token凭证,以后你只要拿着这个凭证就可以把的保存的东西取出来

最终用户不用care我的数据保存在哪里,只要实现类似localStorage的API即可

然后设计一个js对象来充当仓库管理员的角色即可,这个管理员需要支持有多少个token,对应的保存的东西寄放在哪里,就是寄放在哪个子域名下的空间里面,那么我们需要设计实现这么一套数据结构

对应的key下面是存放它存在的仓库的地址,以及保存时间,保存时间的概念是用来计算数据新鲜度的,即计算是否过期

所以我们首先要创建多个iframe,来加载多个域名下代理文件,通过HTML5的api postMessage或者之前老的页面跨域方式互相交互,来通过这个代理的proxy来保存数据

在当前主域名下保存,数据的key的存根,然后实际数据保存在各个子域名下

Ok,那么现在突破了存储上限,我们要保存一个网页下来,就要考虑把网页相关的静态资源都拉下来,对于网页相关的资源,有包括js,css,这些都是文本,这些都简单,只要一个ajax请求过,就可以拿到内容,唯一要考虑的就是安全性就是跨域问题导致js拿不到响应数据,这里只要在CDN节点服务器上设置响应头为

即可,跨域得到内容

js,就是

显示全文
专题