cookie插件和localForage离线储存插件

使用js-cookie插件

安装

npm install js-cookie

引入

import Cookies from "js-cookie";

API

set设值

1. expires
   定义有效期。如果传入Number，那么单位为天，你也可以传入一个Date对象，表示有效期至Date指定时间。默认情况下cookie有效期截止至用户退出浏览器。
2. path
   string，表示此cookie对哪个地址可见。默认为”/”。
3. domain
   string，表示此cookie对哪个域名可见。设置后cookie会对所有子域名可见。默认为对创建此cookie的域名和子域名可见。
4. secure
   true或false，表示cookie传输是否仅支持https。默认为不要求协议必须为https。

//创建简单的cookie
Cookies.set('name', 'value');
//创建有效期为7天的cookie
Cookies.set('name', 'value', {
     expires: 7 });
//为当前页创建有效期7天的cookie
Cookies.set('name', 'value', {
     expires: 7, path: '' });

get取值

Cookies.get('name'); // => 'value'
Cookies.get('nothing'); // => undefined
//获取所有cookie
Cookies.get(); // => { name: 'value' }

remove删除值

Cookies.remove('name');

//如果值设置了路径，那么不能用简单的delete方法删除值，需要在delete时指定路径
Cookies.set('name', 'value', {
     path: '' });
Cookies.remove('name'); // 删除失败
Cookies.remove('name', {
     path: '' }); // 删除成功
//注意，删除不存在的cookie不会报错也不会有返回

与 json 相关

js-cookie允许你向cookie中存储json信息。

如果你通过set方法，传入Array或类似对象，而不是简单的string，那么js-cookie会将你传入的数据用JSON.stringify转换为string保存。

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

如果你用getJSON方法获取cookie，那么js-cookie会用JSON.parse解析string并返回。

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

localForage离线储存插件

安装

npm install localforage

介绍

localForage中文网

• 支持回调的异步 API；
• 支持 IndexedDB，WebSQL 和 localStorage 三种存储模式（自动为你加载最佳的驱动程序）；
• 支持 BLOB 和任意类型的数据，让您可以存储图片，文件等等。
• 支持 ES6 Promises；

对 IndexedDB 和 WebSQL 的支持使您可以为您的 Web 应用程序存储更多的数据，要比 localStorage 允许存储的多很多。其 API 的无阻塞性质使得您的应用程序更快，不会因为 Get/Set 调用而挂起主线程。

localForage 是一个 JavaScript 库，通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据，而不仅仅是字符串。

localForage 有一个优雅降级策略，若浏览器不支持 IndexedDB 或 WebSQL，则使用 localStorage。在所有主流浏览器中都可用：Chrome，Firefox，IE 和 Safari（包括 Safari Mobile）。

将数据保存到离线仓库。你可以存储如下类型的 JavaScript 对象：

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

localForage 提供回调 API 同时也支持 ES6 Promises API，你可以自行选择。

API

getItem获取数据

从仓库中获取 key 对应的值并将结果提供给回调函数。如果 key 不存在，getItem() 将返回 null。

localforage.getItem('somekey').then(function(value) {
    
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
}).catch(function(err) {
    
    // 当出错时，此处代码运行
    console.log(err);
});

// 回调版本：
localforage.getItem('somekey', function(err, value) {
    
    // 当离线仓库中的值被载入时，此处代码运行
    console.log(value);
});

setItem设置数据

将数据保存到离线仓库。

localforage.setItem('somekey', 'some value').then(function (value) {
    
    // 当值被存储后，可执行其他操作
    console.log(value);
}).catch(function(err) {
    
    // 当出错时，此处代码运行
    console.log(err);
});

// 不同于 localStorage，你可以存储非字符串类型
localforage.setItem('my array', [1, 2, 'three']).then(function(value) {
    
    // 如下输出 `1`
    console.log(value[0]);
}).catch(function(err) {
    
    // 当出错时，此处代码运行
    console.log(err);
});

// 你甚至可以存储 AJAX 响应返回的二进制数据
req = new XMLHttpRequest();
req.open('GET', '/photo.jpg', true);
req.responseType = 'arraybuffer';

req.addEventListener('readystatechange', function() {
    
    if (req.readyState === 4) {
     // readyState 完成
        localforage.setItem('photo', req.response).then(function(image) {
    
            // 如下为一个合法的 <img> 标签的 blob URI
            var blob = new Blob([image]);
            var imageURI = window.URL.createObjectURL(blob);
        }).catch(function(err) {
    
          // 当出错时，此处代码运行
          console.log(err);
        });
    }
});

removeItem删除

从离线仓库中删除 key 对应的值。

localforage.removeItem('somekey').then(function() {
    
    // 当值被移除后，此处代码运行
    console.log('Key is cleared!');
}).catch(function(err) {
    
    // 当出错时，此处代码运行
    console.log(err);
});

clear清除所有数据

从数据库中删除所有的 key，重置数据库。

localforage.clear().then(function() {
    
    // 当数据库被全部删除后，此处代码运行
    console.log('Database is now empty.');
}).catch(function(err) {
    
    // 当出错时，此处代码运行
    console.log(err);
});

length仓库长度

获取离线仓库中的 key 的数量（即数据仓库的“长度”）

localforage.length().then(function(numberOfKeys) {
    
    // 输出数据库的大小
    console.log(numberOfKeys);
}).catch(function(err) {
    
    // 当出错时，此处代码运行
    console.log(err);
});

根据 key 的索引获取其名

localforage.key(2).then(function(keyName) {
    
    // key 名
    console.log(keyName);
}).catch(function(err) {
    
    // 当出错时，此处代码运行
    console.log(err);
});

获取数据仓库中所有的 key

localforage.keys().then(function(keys) {
    
    // 包含所有 key 名的数组
    console.log(keys);
}).catch(function(err) {
    
    // 当出错时，此处代码运行
    console.log(err);
});

迭代数据仓库中的所有 value/key 键值对

迭代数据仓库中的所有 value/key 键值对。

iteratorCallback 在每一个键值对上都会调用一次，其参数如下： 1. value 为值 2. key 为键名 3. iterationNumber 为迭代索引 - 数字

// 同样的代码，但使用 ES6 Promises
localforage.iterate(function(value, key, iterationNumber) {
    
    // 此回调函数将对所有 key/value 键值对运行
    console.log([key, value]);
}).then(function() {
    
    console.log('Iteration has completed');
}).catch(function(err) {
    
    // 当出错时，此处代码运行
    console.log(err);
});

// 提前退出迭代：
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) {
    
    // 当出错时，此处代码运行
    console.log(err);
});