Package detail

Cache（适用于浏览器的数据缓存器）

• 前言

Cache构造函数

• Cache构造函数 Cache构造函数

cache实例

• cache cache实例

cache实例方法

• setOpt 更新options值
• backups 将实例对应的实体的数据,备份到本地Store
• removeBackups 清除实例的在本地缓存中的备份
• recover 尝试从本地Store中恢复数据到实例对应的实体

对象

• options

其它

• 安装
• 使用示例
• 示例————在Vue中使用
• 示例————通过script引入
• 两类方案
• 原理流程

前言

Cache 可以保护重要数据，使其不会因浏览器的刷新而消失。比如用户的登录信息.....
使用环境： 必须在浏览器环境(h5+也可以，因为有浏览器环境)。
注意： Cache只用与保护非 Function 类型的数据。

构造函数

说明

Cache构造函数，用来生成一个cache实例，每个cache用来管理一个缓存对象。

参数

• data 必填，需要保护的数据实体，(只保护data中可枚举属性)
• options 构造cache时的配置项

返回值

cache

示例

var user = {
    isLogin: true,
    username: '张三',
    book: [{name: '语文'}, {name: '数学'}]    
}
var cache = new Cache(user, options);

// 提示：构造cache时，内部会自动在user上添加只读属性，保存着对cache的引用。方便使用
console.log(user.__cache === cache);// --->> true

cache

说明

类型Object，由Cache()创建的缓存示例，用来管理一个数据实体的缓存事物。

方法

• setOpt 更新options值
• backups 将实例对应的实体的数据,备份到本地Store
• clearStore 清除实例的在本地缓存中的备份
• recover 尝试从本地Store中恢复数据到实例对应的实体

属性

_options 只读，创建时传入的配置信息，会随setOpt的更新而更新
_data 只读，创建时传入的data

setOpt

说明

类型Function，用来更新options值。（尽量不要更新key，否则可能会造成无法找到原有备份）,无返回值

示例

cache.setOpt({
    clear: true    
})

backups

说明

类型Function，将实例对应的实体的数据,备份到本地Store，无参，无返回值

示例

cache.backups()

removeBackups

说明

类型Function，清除实例的在本地缓存中的备份，无参，无返回值

示例

cache.removeBackups()

recover

说明

类型Function，尝试从本地Store中恢复数据到实例对应的实体，无参，无返回值

示例

cache.recover()

options

说明

构建cache示例时的可用配置项

安装

npm install @webxrd/cache --save
或script引入
<script src="https://static.webxrd.com/npm/cache/cache.min.js"></script>

使用示例

在webpack中使用

import { Cache } from '@webxrd/cache';
const user = {
    name: 'abc',
    age: 1,
    arr: [2, {t: 'bcd'}],
    obj: {
        num: 56
    },
    isHidden: false,
    empty: null,
    noDefined: undefined
};
const cache = new Cache(user, {
    key: 'CUSTOM_TEMP_STORE'
});

示例————在Vue中使用

例如，保护Vuex的数据。 store/index.js——————

import { Cache } from '@webxrd/cache';
const DEFAULT_USER = {
    // 用户名
    username: '',
    token: 'abcde'
};
const store = {
    // 加上专属命名空间路径
    namespaced: true,
    state: {
        user: JSON.parse(JSON.stringify(DEFAULT_USER))
    },
    getters: {
        user: state => state.user
    },
    mutations: {
        // 设置全部的user信息
        SET_USER: (state, data) => {
            state.user = data;
            state.__cache.backups();
        },
        // 更新user信息
        SET_UPDATE_USER: (state, data) => {
            state.user = Object.assign(state.user, data);
        },
        // 重置user信息
        SET_REST: (state) => {
            state.user = JSON.parse(JSON.stringify(DEFAULT_USER));
            state.__cache.removeBackups();
        }
    }
};
const cache = new Cache(store.state, {
    key: 'CUSTOM_TEMP_STORE',
    storeType: 'localStorage'
});
console.log(store.state.__cache === cache);// --->> true
export default store;

示例————通过script引入

<script src="https://static.webxrd.com/npm/cache/cache.min.js"></script>

如果script地址失效。请自行 npm 下载，并到lib目录下提取。

var user = {
    name: 'abc',
    nn: 1,
    obj: {age: '123'}
};
// 使用
const cache = new Cache(user, {
    key: 'CUSTOM_TEMP_STORE'
})

两类方案

1.1 永久保护数据，当浏览器关闭或H5应用程序关闭后 从新打开，数据将恢复，回到上次状态

// default，永久保护数据
new Cache(test, {
    key: 'CUSTOM_TEMP_STORE'
});

1.2 永久保护数据，和1.1一样。区别在于当数据恢复完成时，自动清除缓存中的备份。
这么做不会影响Cache的自动备份与自动恢复，只是 当你需要手动执行recover()时，无法完成，因为无备份可用

// custom，永久保护数据
new Cache(test, {
    key: 'CUSTOM_TEMP_STORE',
    clear: true
});

2.1 临时保护数据，当浏览器关闭或H5应用程序关闭后 从新打开，数据将消失，回到原始状态

// custom，临时保护数据
new Cache(test, {
    key: 'CUSTOM_TEMP_STORE',
    storeType: 'sessionStorage'
});

2.2 永久保护数据，和2.1一样。区别在于当数据恢复完成时，自动清除缓存中的备份。
这么做不会影响Cache的自动备份与自动恢复，只是 当你需要手动执行recover()时，无法完成，因为无备份可用

// custom，临时保护数据
new Cache(test, {
    key: 'CUSTOM_TEMP_STORE',
    storeType: 'sessionStorage',
    clear: true
});

params

options

原理流程

原理流程：
1. 初始化时，执行 recover 尝试恢复数据
2. 刷新或关闭前，执行：backups 将数据的备份到 本地Store
3. 刷新后，执行： recover 尝试恢复数据

所以大多数时候，你都不应该关注本地Store，
因为他们只是《用来规避刷新的暂存中转站》而非数据源，
如果你在某一时刻想要恢复你的data数据，那么你应该直接对data进行操作
总的来说：Cache不会给你增加任何附带的操作，它仅仅保护数据
例如：恢复默认数据

// 默认数据的对象
const origin = {name: 'empty', isLogin: false};

// 投入使用的数据
let data = JSON.parse(JSON.stringify(origin))

const cache = new Cache(data, {
    key: 'CUSTOM_TEMP_STORE'
})
// ...... 假设现在进行了多次更改
data.isLogin = true
// ...... 假设现在进行了多次更改
data.name = 'xiaoxie'

// 现在想要恢复data数据为初始状态，那么直接对data进行操作即可
data = JSON.parse(JSON.stringify(origin));