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

好久没有写博客了,想到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,就是<script src=”url”></script>这种只要改成<script>远程拿到的内容</script>即可,css,<link rel=”stylesheet” href=”url”>这种只要改成<style>内容</style>即可

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

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

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

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

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

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

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

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

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

时间: 2024-11-05 12:28:24

纯js实现无限空间大小的本地存储_javascript技巧的相关文章

JS 日期比较大小的简单实例_javascript技巧

1,比较日期大小的js代码 复制代码 代码如下: <script>var beginDate=$("#beginDate").val();   var endDate=$("#endDate").val();   var d1 = new Date(beginDate.replace(/\-/g, "\/"));   var d2 = new Date(endDate.replace(/\-/g, "\/")); 

纯js实现背景图片切换效果代码_javascript技巧

html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切

js获取图片大小的函数代码_javascript技巧

1.获取图片大小的函数getImageSize 复制代码 代码如下: function getImageSize(imageEl) { var i = new Image(); //新建一个图片对象 i.src = imageEl.src; //将图片的src属性赋值给新建图片对象的src return new Array(i.width, i.height); //返回图片的长宽像素 //return [i.width, i.height]; } 2.示例 复制代码 代码如下: var img

纯JS实现旋转图片3D展示效果_javascript技巧

CSS: <style type="text/css"> #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute;height:40px;width:60px;background:#999999;border:1px solid #eeeeee;cursor:pointer;}</style> Html: input id="l" type

纯js实现重发验证码按钮倒数功能_javascript技巧

代码一: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con

纯JS实现根据CSS的class选择DOM_javascript技巧

// 网上参考的,自己修改了一部分 // 代码如下,纯JS,要求浏览器支持 getElementsByClassName 方法 复制代码 代码如下: <script type="text/javascript"> function getElementsByClassName(classname,node){ node = node || window.document; if(node.getElementsByClassName){ return node.getEle

js变量以及其作用域详解_javascript技巧

一.变量的类型 Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: 复制代码 代码如下: i=100;//Number类型 i="variable";//String类型 i={x:4};//Object类型 i=[1,2,3];//Array类型 JS的这种特性虽然让我们的编码更加灵活,但也带来了一个弊端,不利于Debug,编译器的弱检测让我们维护冗长的

不错的JS中变量相关的细节分析_javascript技巧

这里讨论一下我对Javascript中变量相关细节的认识,有不当之处欢迎来批. 一.变量的类型 Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量.例如: i=100;//Number类型 i="variable";//String类型 i={x:4};//Object类型 i=[1,2,3];//Array类型 JS的这种特性虽然让我们的编码更加灵活,但也带来了

让浏览器崩溃的12行JS代码(DoS攻击分析及防御)_javascript技巧

Ajax与pjax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新-无刷新操作. 但是,ajax应用也会造成另外的问题,容易导致浏览器无法前进与后退,这是个很头疼的问题,开发人员必须增加工作量(比如通过一个隐藏的iframe,或者改变location.ha