Foreword
Look at the recent IDB, IDB is an object database storage, query data have Vernier law, business law, indexing method, using the API lot more difficult to remember.
localForage is an improved web-app offline data storage JavaScript library, and the core is the use of a similar localStorage API, relatively simple and easy to remember. And not only the type of data stored string may be numeric, objects, boolean, array, except undefined. By default, the order given priority use of IDB, WebSQL, localStorage for background storage.
Use localForage only need to include js file in the page, download links:
HTTPS: //github.com/localForag ...
specifically the project GITHUB address
API
1) setItem (key, value, successCallback): create a key parameter is the name of the key, the key parameters, the callback function, the callback function is the corresponding key.
// Unlike localStorage, you can store non-strings.
localforage.setItem('my array', [1, 2, 'three']).then(function(value) {
// This will output `1`.
console.log(value[0]);
}).catch(function(err) {
// This code runs if there were any errors
console.log(err);
});
2) getItem (key, successCallback): obtain data and use a callback function
localforage.getItem('somekey', function(err, value) {
// Run this code once the value has been
// loaded from the offline store.
console.log(value);
});
3) removeItem (key, successCallback): removing the key corresponding to
localforage.removeItem('somekey').then(function() {
// Run this code once the key has been removed.
console.log('Key is cleared!');
}).catch(function(err) {
// This code runs if there were any errors
console.log(err);
});
4) clear (successCallback): Clear All button.
localforage.clear().then(function() {
// Run this code once the database has been entirely deleted.
console.log('Database is now empty.');
}).catch(function(err) {
// This code runs if there were any errors
console.log(err);
});
5) length (successCallback): to obtain the total number of off-line storage key.
localforage.length().then(function(numberOfKeys) {
// Outputs the length of the database.
console.log(numberOfKeys);
}).catch(function(err) {
// This code runs if there were any errors
console.log(err);
});
6) key (keyIndex, successCallback) : The key index key obtained.
7) keys (successCallback): get all the key index.
8) iterate (iteratorCallback, successCallback) : in the database for each key-value pair callback function, the callback function parameter are key, key index, the number of iterations (based on 1).
// The same code, but using ES6 Promises.
localforage.iterate(function(value, key, iterationNumber) {
// Resulting key/value pair -- this callback
// will be executed for every item in the
// database.
console.log([key, value]);
}).then(function() {
console.log('Iteration has completed');
}).catch(function(err) {
// This code runs if there were any errors
console.log(err);
});
May not have to iterate over all the key-value pairs, then simply return a non-undefined type value, you can end early iterations, the return value of the parameter as successCallback. This method is a little problem, the value returned is not quite right:
<!DOCTYPE html>
<html>
<head>
<title>Listing 2.1</title>
<script type="text/javascript" src="https://raw.githubusercontent.com/mozilla/localForage/master/dist/localforage.min.js"> </script>
<script type="text/javascript">
localforage.setItem('array', [1, 2,'three']);
localforage.setItem('string', 'people');
localforage.setItem('number1', 5);
localforage.setItem('number2', 6);
localforage.iterate(function(value, key, iterationNumber) {
if (iterationNumber < 2) {
console.log([key, value]);
} else {
return [key, value];
}
}).then(function(result) {
console.log('Iteration has completed at '+ result);
}).catch(function(err) {
console.log(err);
});
</script>
</head>
<body>
</body>
</html>
Mentioned earlier, localForage default IDB will give priority to the use of the case, WebSQL, localStorage for background storage, but can be set back by setDriver (), if the mechanism is set in the current browser is not supported, or in accordance with the default choice.
setDriver (driverName) / setDriver ([ driverName, nextDriverName]): Set the background support mechanisms, the argument is localforage.INDEXEDDB, localforage.WEBSQL, localforage.LOCALSTORAGE.