纯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继承方式实例
Oct 29 Javascript
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
Vue声明式渲染详解
May 17 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 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中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
JavaScript代码里的判断小结
2016/08/22 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
2017/03/04 Javascript
ES6学习笔记之Set和Map数据结构详解
2017/04/07 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
vue-cli3脚手架的配置及使用教程
2018/08/28 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
keras 获取某层输出 获取复用层的多次输出实例
2020/05/23 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
党委书记岗位职责
2013/11/24 职场文书
教学质量评估实施方案
2014/03/17 职场文书
应届生求职信
2014/05/31 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python
如何利用opencv判断两张图片是否相同详解
2021/07/07 Python