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示例时的可用配置项

| 字段 | 类型 | 说明 | | :--- | :--- | :--- | | key | String | 必填。在缓存中的唯一标识，不可重复,cache会在内部通过该key来找到备份 | | storeType | 'localStorage'或'sessionStorage' | 可选，默认'sessionStorage'，缓存类型。 | | clear | Boolean | 可选，默认false，当数据恢复完成时，是否清除缓存中的备份 | | autoBackups | Boolean | 可选，默认true，是否在页面隐藏/关闭/刷新前自动执行备份 | | autoRecover | Boolean | 可选，默认true，是否在页面显示时自动从备份中恢复数据到实体 |

安装

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

| 字段 | 类型 | 说明 | | :--- | :--- | :--- | | data | Object或Array | 必填，需要保护的数据实体，(只保护data中可枚举属性) | | options | Object | options |

options

| 字段 | 类型 | 说明 | | :--- | :--- | :--- | | key | String | 必填。在缓存中的唯一标识，不可重复,cache会在内部通过该key来找到备份 | | storeType | 'localStorage'或'sessionStorage' | (H5+App不支持),可选，默认'localStorage'，缓存类型。 | | clear | Boolean | (H5+App不支持),可选，默认false，当数据恢复完成时，是否清除缓存中的备份 | | autoBackups | Boolean | 可选，默认true，是否在页面隐藏/关闭/刷新前自动执行备份 | | autoRecover | Boolean | 可选，默认true，是否在页面显示时自动从备份中恢复数据到实体 |

原理流程

原理流程： 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));