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

好久没有写博客了，想到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技术，来实现不发任何请求的浏览，当然了，这里面还有一些别的技术细节需要处理，具体有哪些坑，且听我下回分解！！！

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

赞 (0)

相关推荐

  • 基于js 本地存储(详解)

    在客户端运行的JS是不能操作用户电脑磁盘中的文件的(保护客户端运行的安全) 1.JS中的本地存储: 使用JS向浏览器的某一个位置中存储一些内容,浏览器即使关闭了,存储的信息也不会销毁,当在重新打开浏览器的时候我们依然可以获取到上一次存储的信息 本地存储的方案: 传统: cookie:把信息存储到客户端的浏览器中(但是项目服务器端也是可以获取COOKIE的) session:把信息存储到服务器上的(服务器存储) HTML5:webStorage localStorage:永久存储在客户端的本地 s

  • JS实现本地存储信息的方法(基于localStorage与userData)

    本文实例讲述了JS实现本地存储信息的方法.分享给大家供大家参考,具体如下: WEB应用的快速发展,是的本地存储一些数据也成为一种重要的需求,实现的方案也有很多,最普通的就是cookie了,大家也经常都用,但是cookie的缺点是显而易见的,其他的方案比如:IE6以上的userData,Firefox下面的globalStorage,以及Flash的本地存储,除了Flash之外,其他的几个都有一些兼容性的问题. sessionStorage与localStorage Web Storage实际上由

  • 本地存储localStorage用法详解

    一.什么是localStorage? 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. 二.localStorage的优势与局限 localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可

  • js浏览器本地存储store.js介绍及应用

    store.js - 轻松实现本地存储(LocalStorage) store.js 是一个兼容所有浏览器的 LocalStorage 包装器,不需要借助 Cookie 或者 Flash.store.js 会根据浏览器自动选择使用 localStorage.globalStorage 或者 userData 来实现本地存储功能. store.js 提供非常简洁的 API 来实现跨浏览器的本地存储功能: 复制代码 代码如下: store.set('username', 'marcus') stor

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

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

    好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了, 项目地址https://github.com/xueduany/localstore, demo见http://xueduany.github.io/localstore/, 下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说 先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstor

  • 情人节专属 纯js脚本1k大小的3D玫瑰效果

    情人节专属 纯js脚本1k大小的3D玫瑰效果

    前年圣诞节上,西班牙程序员Roman Cortes带来了用纯javascript脚本编写的神奇3D圣诞树,令人印象深刻.2月14日情人节就要来临了,还是Roman Cortes,这次他又带来了用javascript脚本编写的红色玫瑰花.用代码做出的玫瑰花,这才是牛逼程序员送给女友的最好情人节礼物呢!(提示:在不同浏览器下观看效果.速度会有很大的不同) 图片是由代码生成,用户可以刷新该页面,重复观看这朵玫瑰的呈现过程. 3D玫瑰花的实现代码如下: with(m=Math)C=cos,S=sin,P

  • js仿微博实现统计字符和本地存储功能

    js仿微博实现统计字符和本地存储功能

    随着移动设备和Web应用的普及,为了更好的便于用户的使用,对于网页或应用程序的用户体验要求就越来越高,确实是这样,作为用户更喜欢选择用户体验效果好的网站或应用程序,所以作为开发者的我们就需要开发出更人生化的应用程序了. 相信许多人有使用微博的经验,像微博这样的社交平台,好的用户体验就变得尤其重要了. 例如:我们在发微博时,文本框会实时地提示我们剩余字符数,这样人性化的提示方便了用户知道微博字数的限制,同时也限制了用户的输入字数. 有一句话我们要牢记在心的是:凡是输入,必有限制:凡是输入,必须校验

  • 纯JS实现本地图片预览的方法

    本文实例讲述了纯JS实现本地图片预览的方法.分享给大家供大家参考.具体如下: 刚突然看到,网上已经有很多类似的代码,但没找到一个合适的.就拿自己以前写的写了一个.代码比较简洁,引用了一个我之前写的js.方法可以单独剥离出来使用,未测太多兼容.本机浏览器基本都支持(IE,FF,Chrome) index.html如下: <html> <head> <title>Test</title> <script type="text/javascript

  • JS限制上传图片大小不使用控件在本地实现

    JS限制上传图片大小不使用控件在本地实现

    文件上传之前的检测,通常是通过文件名来判断文件类型是否合法,但是要想检测文件的大小很难办到,除非在本地或者使用控件.使用JS可以轻松解决词问题,js在上传图片前判断大小 这个可以用javascript实现,效果...//允许上传图片文件的大小 具体代码如下   复制代码 代码如下: <script language=javascript> var ImgObj=new Image(); //建立一个图像对象 var AllImgExt=".jpg|.jpeg|.gif|.bmp|.p

  • JS+HTML5本地存储Localstorage实现注册登录及验证功能示例

    本文实例讲述了JS+HTML5本地存储Localstorage实现注册登录及验证功能.分享给大家供大家参考,具体如下: 源码引用的js.jquery都是在线的,代码拷到本地就能运行 登录: <html ng-app="ionicApp"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, m

  • JS项目中对本地存储进行二次的封装的实现

    目录 前言 定义恒量的键名 下层实现 上层调用 总结 前言 平时在开发的中,发现身边同事在使用localStorage和sessionStorage的时候,喜欢在代码里面直接调用,举个的栗子: function login() { //...请求 const userInfo = {userId: 123, userName: '张三'} sessionStorage.setItem('userInfo', JSON.stringify(userInfo)) } function getUser

随机推荐