Pure javascript to implement local storage of infinite space _ javascript skills

This article mainly introduces the functions of pure js to implement local storage with an infinite space size. the source code and demo are all provided to you. This article focuses on the implementation principles. the specific practices can be freely used by our partners. I haven't written a blog for a long time. I thought that I didn't release the source code that I promised two years ago. Recently, I am free to use pure js to implement the open-source function of local storage with unlimited space,

Item address https://github.com/xueduany/localstore,

Demo see http://xueduany.github.io/localstore,

The following is a brief description of the general principle. the detailed details and exception handling will be discussed separately.

First let's break through the principle of local localStorage, the official original saying is that the http://www.w3.org/TR/2013/PR-webstorage-20130409/

So you know, you can use the localStorage of multiple subdomains to design and implement a storePool through the localStorage of multiple subdomains and break through the upper limit.

In actual API storage, the local localStorage is not saved.

This is a bit similar to a Manager mode, that is, you tell the warehouse administrator what to save, the warehouse administrator gives you a key, and then you take the key to the corresponding warehouse to host your stuff, the administrator will give you a token. in the future, you only need to take the token to retrieve the saved items.

The end user does not need to care where my data is stored, as long as the localStorage API is implemented.

Then, you can design a js object to act as the repository administrator. this administrator must support the number of tokens and where the stored items are stored, it is the space under which the sub-domain name is stored, so we need to design and implement such a data structure.

The corresponding key contains the address of the warehouse where it exists and the storage time. The concept of the storage time is used to calculate the data freshness, that is, whether the calculation is expired.

Therefore, we first need to create multiple iframe to load proxy files under multiple domain names, and interact with each other through the HTML5 api postMessage or the previous cross-origin method of the old page, to use the proxy of this proxy to save the data.

The data is saved under the current primary domain name, and the data is stored in the key stub under each subdomain name.

Okay, now we have exceeded the storage ceiling. to save a webpage, we need to consider pulling all the static resources related to the webpage. for webpage-related resources, such as js and css, these are all text and they are simple. as long as an ajax request is passed, you can get the content. The only thing you need to consider is that security is caused by cross-origin issues that js cannot get the response data, set the response header

You can obtain the cross-origin content.

Js, that is