Cookie plugin and localforce offline storage plugin

Use js-cookie plug-in unit

install

npm install js-cookie

introduce

import Cookies from "js-cookie";

API

set Set the value

1. expires
   Define validity period . If you pass in Number, Then the unit is day , You can also pass in a Date object , Means valid until Date Specify time . By default cookie Valid until the user exits the browser .
2. path
   string, It means this cookie Which address is visible . The default is ”/”.
3. domain
   string, It means this cookie Which domain name is visible . After setting cookie Will be visible to all subdomains . The default is to create this... For cookie Your domain name and subdomain name are visible .
4. secure
   true or false, Express cookie Whether the transport only supports https. The default is not required. The protocol must be https.

// Create simple cookie
Cookies.set('name', 'value');
// Created for 7 Days of cookie
Cookies.set('name', 'value', {
     expires: 7 });
// Create an expiration date for the current page 7 Days of cookie
Cookies.set('name', 'value', {
     expires: 7, path: '' });

get Value

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
// Get all cookie
Cookies.get(); // => { name: 'value' }

remove Delete value

Cookies.remove('name');

// If the value sets the path , Then you can't use simple delete Method to delete the value , Need to be in delete Specify path when 
Cookies.set('name', 'value', {
     path: '' });
Cookies.remove('name'); //  Delete failed 
Cookies.remove('name', {
     path: '' }); //  Delete successful 
// Be careful , Delete nonexistent cookie There will be no error and no return 

And json relevant

js-cookie You are allowed to cookie Storage in json Information .

If you pass set Method , Pass in Array Or something like that , Not simply string, that js-cookie Will use your incoming data JSON.stringify Convert to string preservation .

Cookies.set('name', {
     foo: 'bar' });
Cookies.get('name'); // => '{"foo":"bar"}'
Cookies.get(); // => { name: '{"foo":"bar"}' }

If you use getJSON Method to get cookie, that js-cookie Will use JSON.parse analysis string And back to .

Cookies.getJSON('name'); // => { foo: 'bar' }
Cookies.getJSON(); // => { name: { foo: 'bar' } }

localForage Store plug-ins offline

install

npm install localforage

Introduce

localForage Chinese net

• Asynchronous support for callbacks API;
• Support IndexedDB,WebSQL and localStorage Three storage modes （ Automatically load the best driver for you ）;
• Support BLOB And any type of data , Allows you to store images , Documents, etc. .
• Support ES6 Promises;

Yes IndexedDB and WebSQL The support of enables you to provide for your Web Applications store more data , than localStorage Allow a lot more storage . Its API The non blocking nature of makes your application faster , Not because Get/Set Call to suspend the main thread .

localForage It's a JavaScript library , By simple analogy localStorage API Asynchronous storage to improve your Web Offline experience of applications . It can store multiple types of data , Not just strings .

localForage There's an elegant downgrade strategy , If the browser doesn't support IndexedDB or WebSQL, Then use localStorage. Available in all major browsers ：Chrome,Firefox,IE and Safari（ Include Safari Mobile）.

Save data to offline warehouse . You can store the following types of JavaScript object ：

• Array
• ArrayBuffer
• Blob
• Float32Array
• Float64Array
• Int8Array
• Int16Array
• Int32Array
• Number
• Object
• Uint8Array
• Uint8ClampedArray
• Uint16Array
• Uint32Array
• String

localForage Provide callback API It also supports ES6 Promises API, You can choose .

API

getItem get data

Get from warehouse key And provide the result to the callback function . If key non-existent ,getItem() Will return null.

localforage.getItem('somekey').then(function(value) {
    
    //  When values in the offline repository are loaded , Here the code runs 
    console.log(value);
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});

//  Callback version ：
localforage.getItem('somekey', function(err, value) {
    
    //  When values in the offline repository are loaded , Here the code runs 
    console.log(value);
});

setItem Set up the data

Save data to offline warehouse .

localforage.setItem('somekey', 'some value').then(function (value) {
    
    //  When the value is stored , Other operations can be performed 
    console.log(value);
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});

//  differ  localStorage, You can store non string types 
localforage.setItem('my array', [1, 2, 'three']).then(function(value) {
    
    //  The following output  `1`
    console.log(value[0]);
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});

//  You can even store  AJAX  The binary data returned by the response 
req = new XMLHttpRequest();
req.open('GET', '/photo.jpg', true);
req.responseType = 'arraybuffer';

req.addEventListener('readystatechange', function() {
    
    if (req.readyState === 4) {
     // readyState  complete 
        localforage.setItem('photo', req.response).then(function(image) {
    
            //  The following is a legal  <img>  Labeled  blob URI
            var blob = new Blob([image]);
            var imageURI = window.URL.createObjectURL(blob);
        }).catch(function(err) {
    
          //  When something goes wrong , Here the code runs 
          console.log(err);
        });
    }
});

removeItem Delete

Remove from offline warehouse key Corresponding value .

localforage.removeItem('somekey').then(function() {
    
    //  When the value is removed , Here the code runs 
    console.log('Key is cleared!');
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});

clear Clear all data

Remove all... From the database key, Reset database .

localforage.clear().then(function() {
    
    //  When all databases are deleted , Here the code runs 
    console.log('Database is now empty.');
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});

length Warehouse length

Get the data in the offline warehouse key The number of （ That is, data warehouse “ length ”）

localforage.length().then(function(numberOfKeys) {
    
    //  The size of the output database 
    console.log(numberOfKeys);
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});

according to key Gets the name of the index

localforage.key(2).then(function(keyName) {
    
    // key  name 
    console.log(keyName);
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});

Get all the... In the data warehouse key

localforage.keys().then(function(keys) {
    
    //  Contains all the  key  Array of names 
    console.log(keys);
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});

Iterate all of the... In the data warehouse value/key Key value pair

Iterate all of the... In the data warehouse value/key Key value pair .

iteratorCallback Called once on each key value pair , Its parameters are as follows ： 1. value Value 2. key Is the key name 3. iterationNumber Index for iteration - Numbers

//  Same code , But use  ES6 Promises
localforage.iterate(function(value, key, iterationNumber) {
    
    //  This callback function will  key/value  Key value pair operation 
    console.log([key, value]);
}).then(function() {
    
    console.log('Iteration has completed');
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});

//  Exit the iteration early ：
localforage.iterate(function(value, key, iterationNumber) {
    
    if (iterationNumber < 3) {
    
        console.log([key, value]);
    } else {
    
        return [key, value];
    }
}).then(function(result) {
    
    console.log('Iteration has completed, last iterated pair:');
    console.log(result);
}).catch(function(err) {
    
    //  When something goes wrong , Here the code runs 
    console.log(err);
});