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


Posted in Javascript onJune 18, 2015

好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

即可,跨域得到内容

js,就是<script src=”url”></script>这种只要改成<script>远程拿到的内容</script>即可,css,<link rel=”stylesheet” href=”url”>这种只要改成<style>内容</style>即可

这里只要考虑能匹配到原来html的这些代码块即可,只要考虑一个问题,就是js的regexp默认是贪婪模式,所以我们的正则要做到最小匹配,

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

然后找到html里面对应的内容,替换成为已经保存在localStorage里面的内容即可

那么对于图片,如何获得图片的内容呢?我们知道图片是rawdata,2进制,首先我们要解决获取图片2进制流的问题

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

然后通过fileReader直接转换成为base64,既可以保存在本地了,然后替换图片的src从一个url变成一段base64的字符串即可

然后把整个网页html里面对应资源替换成为我们特殊标记

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

LOCALSTORE标记,然后通过递归查找算法,从各个子store取得内容,还原平凑成为原来的完整html

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

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

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

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

Javascript 相关文章推荐
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
javascript实现在线客服效果
Jul 15 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
深入理解$.each和$(selector).each
May 15 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
JS实现当前页居中分页效果的方法
Jun 18 #Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 #Javascript
javaScript中Math()函数注意事项
Jun 18 #Javascript
理解Javascript的动态语言特性
Jun 17 #Javascript
你所不了解的javascript操作DOM的细节知识点(一)
Jun 17 #Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 #Javascript
在Python中使用glob模块查找文件路径的方法
Jun 17 #Javascript
You might like
新手学PHP之数据库操作详解及乱码解决!
2007/01/02 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
python分割列表(list)的方法示例
2017/05/07 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python实发邮件实例详解
2019/11/11 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
Senreve官网:美国旧金山的奢侈手袋品牌
2019/03/21 全球购物
员工安全生产承诺书
2014/05/22 职场文书
社区矫正工作方案
2014/06/04 职场文书
毕业生面试求职信
2014/06/23 职场文书
化学专业毕业生求职信
2014/07/28 职场文书
查摆剖析材料范文
2014/09/30 职场文书
2014年职称评定工作总结
2014/11/26 职场文书
周一给客户的问候语
2015/11/10 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
Python与C++中梯度方向直方图的实现
2022/03/17 Python