Introduction to LocalForage
LocalForage is a fast and simple storage library for JavaScript. It improves the offline experience of your web applications by using asynchronous storage, which is backed by IndexedDB, WebSQL, or localStorage. It also creates a simple caching layer to make your app faster and more responsive.
How to Use LocalForage
Setup
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.min.js"></script>
Basic Operations
Setting a Value
localforage.setItem('key', 'value').then(function() {
console.log('Value has been set');
}).catch(function(err) {
console.log('Error setting value:', err);
});
Getting a Value
localforage.getItem('key').then(function(value) {
console.log('Retrieved value:', value);
}).catch(function(err) {
console.log('Error getting value:', err);
});
Removing a Value
localforage.removeItem('key').then(function() {
console.log('Value has been removed');
}).catch(function(err) {
console.log('Error removing value:', err);
});
Clearing All Values
localforage.clear().then(function() {
console.log('Database is now empty');
}).catch(function(err) {
console.log('Error clearing database:', err);
});
Getting All Keys
localforage.keys().then(function(keys) {
console.log('All keys in database:', keys);
}).catch(function(err) {
console.log('Error getting keys:', err);
});
Custom Configuration
You can configure LocalForage to use different drivers (IndexedDB, WebSQL, localStorage).
localforage.config({
driver: localforage.INDEXEDDB, // Force IndexedDB; same as using setDriver()
name: 'myApp',
version: 1.0,
storeName: 'keyvaluepairs', // Should be alphanumeric, with underscores.
description: 'some description'
});
Example Application
Here is an example of a simple app that uses LocalForage to store, retrieve, and display user preferences.
<!DOCTYPE html>
<html>
<head>
<title>LocalForage Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.min.js"></script>
<script>
// Store user preference
function savePreference() {
var color = document.getElementById('color').value;
localforage.setItem('favoriteColor', color).then(function() {
alert('Preference saved!');
}).catch(function(err) {
console.log('Error setting value:', err);
});
}
// Get user preference
function loadPreference() {
localforage.getItem('favoriteColor').then(function(color) {
if (color !== null) {
document.getElementById('displayColor').innerText = 'Your favorite color is: ' + color;
} else {
document.getElementById('displayColor').innerText = 'No preference set.';
}
}).catch(function(err) {
console.log('Error getting value:', err);
});
}
window.onload = function() {
loadPreference();
};
</script>
</head>
<body>
<h1>Set Your Favorite Color</h1>
<input type="text" id="color" placeholder="Enter your favorite color">
<button onclick="savePreference()">Save Preference</button>
<p id="displayColor">Your favorite color is: </p>
</body>
</html>
With LocalForage, you can ensure that your application can reliably store data on the user’s browser, improving both performance and the offline user experience.
Hash: 0e8427a40831c384f7f1de368bf96df520c1559c6ef19fd7211e5971849679fd
