純js實現無限空間大小的本地存儲_javascript技巧

項目地址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，就是

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com