bag.js is loader for
.js
/.css
and other files, that uses IndexedDB/ WebSQL / localStorage for caching. Consider it as alternative for other types of loaders for modern browsers, that reduce number of server requests, especially for mobile devices. Also bag.js can be used as simple key/value storage, that doesn't require you to know details about IndexedDB and WebSQL.
This project is inspired by basket.js, but provides more safe storages for big assets and universal key/value interface. Key features are:
Requirements:
This package requires Promise polyfill for old browsers. We recommend lie, it's small enougth and fast.
Install
via bower:
via npm:
bower install bagjs --save
Simple:
var bag = new window.Bag(); bag.require(['/site.css', '/jquery.js', '/site.js']) .then(() => { // code to run after loading // ... }) .catch(err => console.log('loading error: ', err));
Advanced:
var bag = new window.Bag({ prefix: 'my_namespace', stores: ['indexeddb', 'websql'], timeout: 20000, expire: 24 }); bag.isValidItem = function(source, obj) { return (source && (source.url === obj.url)) ? true : false; }; var files = [ { url: '/site.css', expire: 1 }, { url: '/jquery.js', expire: 10 }, { url: '/site.js' }, { url: '/more_styles.css', expire: 5, execute: false } ]; bag.require(files) .then(data => { console.log('loaded', data); }) .catch(err => console.log(err)); })
You can skip new
keyword. Also, you can use callbacks:
window.Bag().require([ '/site.css', '/site.js'] .then(data => { console.log(data); }) .catch(err => console.log(err));
Using as key/value storage:
var obj = { lorem: 'ipsum' }; var bag = new window.Bag(); bag.set('dolorem', obj) .then(() => bag.get('dolorem')); .then(data => console.log('Loaded data:\n', data)); .catch(err => console.log(err)); .then(() => bag.remove('dolorem'));
Note, all methods with optional callbacks will return promises if callback is not set.
Object constructor. You can also define options after constructor call, via instance properties (they have the same names). Options (hash):
prefix
- Data namespace. Default - bag
. Used to separate data for multiple instances.stores
- Array of storage names to use, ordered by preference. Default ['indexeddb', 'websql', 'localstorage']
.timeout
- files loading timeout, in seconds. Default 20.expire
- require()
data expiration, in hours. Default - 1 month. 0 or unset - don't expire.Note 1: you can skip new
keyword, calling Bag()
will return you new instance anyway.
Note 2: prefix
must be set before require
/get
/set
/remove
/clear
calls. Other options can be changed anytime.
Array
), those are loaded in parallel, but injected in defined order.files
param can be:
Object
- resource info (see details below).String
- just resource url, other params will be default.Array(Object|String)
- list of resources to load in parallel.resource info:
url
- resource URI, required.expire
- optional, expiration time in hours. 0 or not set - don't expire.key
- the name, used to store loaded file, if not defined, then url
will be used.unique
- a token stored with the cached item. If you request the same item again with a different token the script will be fetched and cached again.live
- force cache bypass, for development needs.cached
- force request from cache only.result (Promise):
files
type. If a single resource is requested (Object
|String
), data
is String
. If an Array
of resources is requested, or chained call done, data is array of strings.Note, unless you pass resources info in short form, input objects are extended with loaded data.
Load data by key
name. Not existing values are returned as undefined
.
Put data into storage under key
name.
key
- String to address data.data
- JS object to store. We currently support only objects, serializable by JSON. Don't try to put functions or arraybuffers.expire
- Expiration time in seconds. Don't expire by default.Remove key
data from store.
Clear all storage data (in your namespace), or just expired objects when called as bag.clear(true)
.
Add handler for loaded files with specified mime types. By default, handlers for application/javascript
and text/css
already exist. If you set execute: false
in resource info, then handler will not be applied.
types
- String
with mime type or Array
of strings.handler
- function to "execute" file of that type.Remove handler for specified mime type (opposite to addHandler
).
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4