Explore localforage, the JS library that has broken the 5M limit for local offline storage

This article was posted on Monday, June 4, 2018, 01:25, categorized as js instance. Read 879 times, 527 times today

By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reprinted in full, but with the written permission of the original author, while retaining the original author and source, the abstract drainage is optional.

I. introduction to localforage project

Forage Project address: github.com/localForage…

As of today (June 3, 2018), there have been more than 12,000 stars, 10,000 level of projects.

Localforage is used to store data locally.

When it comes to localStorage data, the first thing we think of is localStorage, which should be used by many friends. It is very simple to use. However, localStorage has the following disadvantages:

Storage capacity is limited, most browsers should have a maximum of 5M. I have encountered a situation where localStorage stores characters and then bursts in size.
Only strings are supported, and if you want to store objects you will need to convert json. stringify and json. parse to each other, which is a bit verbose.
The reads are all synchronous. For the most part, it works fine. However, if you store a large amount of data, such as an important image stored in Base64 format, there may be a perceived delay in readability.

Forage has been designed to circumvent the shortcomings of localStorage above, while preserving the benefits of localStorage. From the naming you can see that the relationship between the two is not shallow.

The advantage of localStorage is that the API is very simple and easy to use. So localforage is exactly the same as localStorage.

As for localStorage deficiencies, localforage and other HTML5 apis used to circumvent them, what are the apis? IndexedDB and WebSQL.

That is, the logic for localforage is this: use IndexedDB to store data in preference, WebSQL if not supported by the browser, or localStorage if not supported by the browser.

Then the API is also the localStorage API, that is, the data to add, delete, change and check through the get, set, remove, clear and length API.

Forage is a forage case

You can optionally click here: Local upload photo demo in localForage blob format

The first time you enter the demo page, there is only an upload image button.

Click the Upload image button to display the selected image in bloB form. For example:

At this point, you refresh the page and the same image will be displayed because you have stored the image locally as blob data using localforage.

The relevant HTML code is:

<label >< input type="file" id="fileImg" ACCEPT ="image/*" hidden> <p id="result"></p>Copy the code

Then the JS code is as follows:

<script src="./localforage.min.js"></script> <script> var eleResult = document.getElementById('result'); Var eleImg = document.createElement('img'); GetItem ('zxxImg', function (err, value) {if (err == null && value) {eleimg.src = value; eleResult.appendChild(eleImg); }}); Var reader = new FileReader(); reader.onload = function(event) { if (! eleImg.src) { eleResult.appendChild(eleImg); } var blob = URL.createObjectURL(new Blob([event.target.result])); eleImg.src = blob; // blob local storage localforage. SetItem ('zxxImg', blob); }; Var file = null; document.getElementById('fileImg').addEventListener('change', function (event) { file = event.target.files[0]; If (file.type.indexof ("image") == 0) {read.readasArrayBuffer (file); }}); </script>Copy the code

As you can see, while localforage has the same API name as localStorage, it is different whether it is being implemented asynchronously or asynchronously, as illustrated below.

Localforage. GetItem ('key', function (err, value) {// An error occurs if err is not null. Otherwise value is what we want});Copy the code

Difference between forage and indexDB

IndexDB is a local database store that is powerful enough to store even complex structures. LocalStorage uses only some of its functions, many of which are limited. For example, localStorage can only store one field at a time.

I’ve written about HTML5 indexedDB before, titled “HTML5 indexedDB Front-end Local Storage Database Example Tutorial”.

IndexDB has almost unlimited space, good performance, and support for a wide variety of data structures. Why does indexDB feel so tepid in the industry?

One of the reasons I think it’s important is the cost of getting started, which includes two aspects:

The front end needs to understand some basic concepts of the database, such as tables, cursors, transactions, locks, etc. And the common front end of the industry are dealing with the page, the database operation belongs to the back end of the back end, from some far, so, a lot of front end do not understand, need to start from scratch database learning.
IndexedDB has many, long, confusing apis that are expensive to learn, easy to remember, and few good resources on the web.

The advent of localforage has been instrumental in saving the country. In general, we do not need to be particularly sophisticated in storing data, as long as we are not completely offline, localforage is forage. Without wasting the best of indexDB, it avoids the pitfalls of indexDB’s high upstart costs. From this perspective, indexDB should thank Localforage.

Of course, if the data is stored in a responsible multi-row, multi-list structure, I recommend doing some serious work to learn how to use indexDB.

Fourth, concluding remarks

IndexDB Supported by Internet Explorer 10+. Therefore, if you want to store data in any arbitrary format using LocalForage, you need to be aware of browser compatibility issues, such as storing Blob data with local images, which is definitely not supported by IE9. I’m afraid these browsers can only store strings.

Whether something has life depends not on whether it is strong but whether it is simple enough.

Thanks for reading!

Explore localforage, the JS library that has broken the 5M limit for local offline storage