Native storage _javascript technique of pure JS to realize infinite space size

Long time No blog, think 2 years ago promised to release the source code also did not put out, recently finally have the empty first to achieve unlimited space size of the local storage function of open source,

Project Address Https://github.com/xueduany/localstore,

Demo See Http://xueduany.github.io/localstore/,

Here is a brief talk about the general principles, details and exception handling after the opportunity to speak alone

First of all, to break the principle of local localstorage, the official said so http://www.w3.org/TR/2013/PR-webstorage-20130409/

So you know, you can take advantage of multiple subdomains localstorage is not interdependent nature, to through multiple subdomains localstorage to design to achieve a storepool, break the upper limit

So, when the actual API is stored, it's not a local localstorage save.

It's kind of like a manager mode, is that you tell the warehouse keeper what you want to save, the warehouse keeper gives you a key, then you take the key to the corresponding warehouse to hold your things up, the administrator to give you a token certificate, later you just take this voucher can put the preservation of things out

End users do not have to care where my data is stored, as long as the implementation of a similar Localstorage API can

Then design a JS object to act as the warehouse Administrator's role, this administrator needs to support how many token, the corresponding preservation of the things where, is hosted in the space under the domain, then we need to design to achieve such a set of data structure

The corresponding key below is the address of the repository where it exists, and the save time, the concept of saving time is used to calculate the freshness of the data, that is, whether the calculation expires

So we first want to create multiple iframe, to load multiple domain name under the proxy file, through the HTML5 API PostMessage or the old page Cross-domain way to interact with each other, through proxy to save data

Save the key stub of the data under the current primary domain name, and then save the actual data under each subdomain

Ok, then now break the storage limit, we want to save a page down, we should consider the Web page related to the static resources are pulled down, for the Web page related resources, including JS,CSS, these are text, these are simple, as long as an AJAX request, you can get content, The only thing to consider is that security is a cross-domain problem resulting in JS can not get response data, here as long as the CDN node server set up the response header for

You can get content across a domain

JS, is <script src= "url" ></script> this as long as the <script> remotely get content </script> can, Css,<link rel= " Stylesheet "href=" URL > This can only be changed to <style> content </style>

Here just consider can match to the original HTML of these blocks of code, as long as the consideration of a problem, is JS regexp default is greedy mode, so we are to do the minimum matching,

Then find the corresponding content in the HTML and replace it with what has been saved in the localstorage.

So for the picture, how to get the content of the picture? We know the picture is rawdata,2, first we have to solve the problem of getting the image 2 stream

Then the direct conversion through FileReader to Base64, can be saved locally, and then replace the picture of src from a URL into a base64 string can be

And then replace the entire HTML page with the corresponding resource as our special marker.

Localstore tags, and then through the recursive lookup algorithm, from each sub store to get content, restore flat to become the original full HTML

And then directly through document.write to restore the original page

With this principle, you can take a website offline to the local, and then based on singlepage technology, to achieve without any request of browsing, of course, there are some other technical details to be dealt with, specifically what pits, and listen to my let's!!!

The above mentioned is the entire content of this article, I hope you can enjoy.