純js實(shí)現(xiàn)無限空間大小的本地存儲(chǔ)
好久沒有寫博客了，想到2年前答應(yīng)要放出源代碼的也沒放出來，最近終于有空先把純js實(shí)現(xiàn)無限空間大小的本地存儲(chǔ)的功能開源了，
項(xiàng)目地址https://github.com/xueduany/localstore，
demo見http://xueduany.github.io/localstore/，
下面給大家簡(jiǎn)單說說大概原理，具體細(xì)節(jié)和異常處理后面有機(jī)會(huì)在單獨(dú)說
先說下突破本地localStorage的原理，官方原話是這么說的http://www.w3.org/TR/2013/PR-webstorage-20130409/
所以你懂的，你可以利用多個(gè)子域名的localStorage是不互相依賴的性質(zhì)，來通過多個(gè)子域名的localStorage來設(shè)計(jì)實(shí)現(xiàn)一個(gè)storePool，突破上限
那么，在實(shí)際API存儲(chǔ)的時(shí)候，就不是對(duì)本地localStorage的保存了
這有點(diǎn)類似一個(gè)Manager模式，就是你告訴倉庫管理員你要保存什么，倉庫管理員給你一把鑰匙，然后你拿著鑰匙去對(duì)應(yīng)的倉庫把你的東西托管起來，管理員再給你一個(gè)token憑證，以后你只要拿著這個(gè)憑證就可以把的保存的東西取出來
最終用戶不用care我的數(shù)據(jù)保存在哪里，只要實(shí)現(xiàn)類似localStorage的API即可
然后設(shè)計(jì)一個(gè)js對(duì)象來充當(dāng)倉庫管理員的角色即可，這個(gè)管理員需要支持有多少個(gè)token，對(duì)應(yīng)的保存的東西寄放在哪里，就是寄放在哪個(gè)子域名下的空間里面，那么我們需要設(shè)計(jì)實(shí)現(xiàn)這么一套數(shù)據(jù)結(jié)構(gòu)
對(duì)應(yīng)的key下面是存放它存在的倉庫的地址，以及保存時(shí)間，保存時(shí)間的概念是用來計(jì)算數(shù)據(jù)新鮮度的，即計(jì)算是否過期
所以我們首先要?jiǎng)?chuàng)建多個(gè)iframe，來加載多個(gè)域名下代理文件，通過HTML5的api postMessage或者之前老的頁面跨域方式互相交互，來通過這個(gè)代理的proxy來保存數(shù)據(jù)
在當(dāng)前主域名下保存，數(shù)據(jù)的key的存根，然后實(shí)際數(shù)據(jù)保存在各個(gè)子域名下
Ok，那么現(xiàn)在突破了存儲(chǔ)上限，我們要保存一個(gè)網(wǎng)頁下來，就要考慮把網(wǎng)頁相關(guān)的靜態(tài)資源都拉下來，對(duì)于網(wǎng)頁相關(guān)的資源，有包括js，css，這些都是文本，這些都簡(jiǎn)單，只要一個(gè)ajax請(qǐng)求過，就可以拿到內(nèi)容，唯一要考慮的就是安全性就是跨域問題導(dǎo)致js拿不到響應(yīng)數(shù)據(jù)，這里只要在CDN節(jié)點(diǎn)服務(wù)器上設(shè)置響應(yīng)頭為
即可，跨域得到內(nèi)容
js，就是<script src=”url”></script>這種只要改成<script>遠(yuǎn)程拿到的內(nèi)容</script>即可，css，<link rel=”stylesheet” href=”url”>這種只要改成<style>內(nèi)容</style>即可
這里只要考慮能匹配到原來html的這些代碼塊即可，只要考慮一個(gè)問題，就是js的regexp默認(rèn)是貪婪模式，所以我們的正則要做到最小匹配，
然后找到html里面對(duì)應(yīng)的內(nèi)容，替換成為已經(jīng)保存在localStorage里面的內(nèi)容即可
那么對(duì)于圖片，如何獲得圖片的內(nèi)容呢？我們知道圖片是rawdata，2進(jìn)制，首先我們要解決獲取圖片2進(jìn)制流的問題
然后通過fileReader直接轉(zhuǎn)換成為base64，既可以保存在本地了，然后替換圖片的src從一個(gè)url變成一段base64的字符串即可
然后把整個(gè)網(wǎng)頁html里面對(duì)應(yīng)資源替換成為我們特殊標(biāo)記
LOCALSTORE標(biāo)記，然后通過遞歸查找算法，從各個(gè)子store取得內(nèi)容，還原平湊成為原來的完整html
然后直接通過document.write來還原原來的頁面
通過這種原理，你可以把一個(gè)網(wǎng)站離線化到本地，然后基于singlePage技術(shù)，來實(shí)現(xiàn)不發(fā)任何請(qǐng)求的瀏覽，當(dāng)然了，這里面還有一些別的技術(shù)細(xì)節(jié)需要處理，具體有哪些坑，且聽我下回分解?。?！
以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。
相關(guān)文章
這篇文章主要介紹了js獲取域名的方法,涉及window.location中常見方法的使用技巧,需要的朋友可以參考下2015-01-01
setTimeout與setInterval在不同瀏覽器下的差異
setTimeout與setInterval是window對(duì)象的兩個(gè)非常神奇方法，用于實(shí)現(xiàn)定時(shí)或延時(shí)調(diào)用一個(gè)函數(shù)或一段代碼2010-01-01
作為一名前端開發(fā),我們平時(shí)也少不了對(duì)文件流數(shù)據(jù)進(jìn)行處理,今天簡(jiǎn)單整理一下日常開發(fā)中比較常見的一些處理文件流的場(chǎng)景及處理方法,希望可以幫助到大家2023-09-09
JS+CSS實(shí)現(xiàn)類似QQ好友及黑名單效果的樹型菜單
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)類似QQ好友及黑名單效果的樹型菜單,涉及JavaScript結(jié)合鼠標(biāo)事件針對(duì)頁面元素CSS樣式的動(dòng)態(tài)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
這篇文章主要為大家詳細(xì)介紹了JavaScript門面模式的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
js中頁面的重新加載(當(dāng)前頁面/上級(jí)頁面)及frame或iframe元素引用介紹
用JavaScript刷新上級(jí)頁面和當(dāng)前頁面在某些情況下還是比較實(shí)用的，感興趣的朋友可以了解下另外介紹一下frame或iframe元素的引用方法，希望本文對(duì)你有所幫助2013-01-01
layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法
今天小編就為大家分享一篇layui表格 返回的數(shù)據(jù)狀態(tài)異常的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS實(shí)現(xiàn)的base64加密解密操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)的base64加密解密操作,結(jié)合實(shí)例形式分析了基于javascript的base64加密與解密函數(shù)定義與使用相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
相信大家都知道圖表是數(shù)據(jù)圖形化的表示，通過形象的圖表來展示數(shù)據(jù)，比如條形圖，折線圖，餅圖等。可視化圖表可以幫助開發(fā)者更容易理解復(fù)雜的數(shù)據(jù)，提高生產(chǎn)的效率和Web應(yīng)用和項(xiàng)目的可靠性?，F(xiàn)在就讓我們大家一起來學(xué)習(xí)用D3.js來實(shí)現(xiàn)餅圖的方法，有需要的可以參考借鑒。2016-09-09
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)放大鏡特效，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03