[分享黑科技]純js突破localstorage存儲上線，遠程抓取圖片，並轉碼base64保存本地，最終實現整個網站全部靜態資源離線到用戶手機效果卻不依賴瀏覽器的緩存機制，單頁應用最新黑科技

很久沒有寫博客了，想到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技術，來實現不發任何請求的瀏覽，固然了，這裏面還有一些別的技術細節須要處理，具體有哪些坑，且聽我下回分解！！！