基于localStorage的本地缓存模块

前言

这是一个很久以前做的模块了，最近想着整理一下过去的一些产出，所以就梳理到这里来了。

目的

利用localStorage作为缓存存储的手段，减轻页面加载负担（减少对接口请求的次数和重复请求同样数据）。

介绍

模块符合UMD规范；
模块中的存储是基于localStorage的；
经测试，功能能够兼容到ie8+，chrome，firefox等，对于不支持localStorage的浏览器，会从控制台输出提示信息（可配置是否开启控制台输出提示信息）；
所有接口都会有控制台输出提示信息；
利用了try catch捕获异常（包括JSON.parse操作失败时的捕获和localStorage.setItem()操作失败时的捕获等）
源码是23KB，压缩后代码是7KB。

配置和初始化

var gs = new cacheStore({
    dataType: 'JSON',
    expire: 1,
    isCleanDirtyStorage: true,
    isCleanDataWhenFull: true,
    turnOnLogger: true
});

dataType：配置get()返回数据的类型，String, JSON，默认是’JSON’；
expire：配置过期时间的设置方式，默认是1；
isCleanDirtyStorage：配置是否开启脏数据清除机制；
isCleanDataWhenFull：配置是否满时清理过期数据机制；
turnOnLogger：配置是否开启控制台输出功能。

过期时间设置

‘1’，按照【时间间隔】设置过期，如：时间间隔是1天，则本次请求以后的1天内，不过期，从localStrorage中读取数据；反之，本次请求以后的1天后，过期，重新从接口请求数据并设置过期时间为1天后；
‘2’，按照【时间点】设置过期，如：时间点是2016-07-20 00:00:00，则此时间点内，不过期，从localStrorage中读取数据；反之，此时间点后，过期，重新从接口请求数据。

API

init

参数名：

{
    dataType: 'JSON',
    expire: 1
}

类型：object
是否必须：否
描述：初始化cacheStore对象（注：默认值是：{dataType: ‘JSON’,expire: 1}）
返回值：无

save

参数名：

{
    keyName: 'localStoragekeyName',
    value: 'localStorageValue',
    period: 1000,
    expire: '2016/07/09 00:00:00'
}

类型：object
是否必须：是
描述：在本域的localStorage，修改一个键值（注：必须传keyName，period默认为1 24 60 60 1000，单位是毫秒，expire格式必须是yyyy/mm/dd hh:mm:ss，如果keyName重名，则覆盖旧的值）
返回值：
returnValues = {
data: ‘’,
result: 1,
msg:’’
}

del

参数名：

1
2
3

{
    keyName: 'localStoragekeyName'
}

类型：object
是否必须：是
描述：删除本域的localStorage的一个键值
返回值：注：必须传keyName
returnValues = { data: ‘’, result: 1, msg:’’ }

get

参数名：

1
2
3

{
    keyName: 'localStoragekeyName'
}

类型：object
是否必须：是
描述：获取本域的localStorage的一个键值的内容（注：必须传keyName）
返回值：
returnValues = {
data: ‘’, // data的数据格式受配置的dataType控制
result: 1, // result为1，获取成功
msg:’’ // result为0，获取失败
}

update

参数名：

{
    keyName: 'localStoragekeyName',
    value: 'localStorageValue',
    period: 1000,
    expire: '2016/07/09 00:00:00'
}

类型：object
是否必须：是
描述：在本域的localStorage，新增一个键值（注：必须传keyName；period默认为1 24 60 60 1000，单位是毫秒；expire格式必须是yyyy/mm/dd hh:mm:ss）
返回值：returnValues = { data: ‘’, result: 1, msg:’’ }

getSize

参数名：

1
2
3

{
    keyName: 'localStoragekeyName'
}

类型：object
是否必须：否
描述：获取本域的localStorage的一个键值占用的空间大小或全部的键值占用空间大小总和（注：keyName为空时，默认是返回存储大小总和）
返回值：size，数据类型int

getRemainSize

参数名：无
类型：无
是否必须：否
描述：获取本域的localStorage的剩余空间大小。因各个浏览器的localStorage总容量会有所差异，所以此处返回的是大概的约数，约有100000~200000b的偏差
返回值：size，数据类型int

flush

参数名：无
类型：无
是否必须：否
描述：清空本域下的localStorage的所有键值
返回值：无

_flushDirtyRead

参数名：无
类型：无
是否必须：否
描述：清空本域下的localStorage的所有键值
返回值：无

用法

// 新建对象
var gs = new cacheStore();
// 初始化对象，非必要
gs.init({
    dataType: 'JSON',
    expire: 1,
    isCleanDirtyStorage: true,
    isCleanDataWhenFull: true,
    turnOnLogger: true
});
// 一个样例
var item = {
    keyName: 'getParam',
    value: res.data,
    period: 1 * 1 * 60 * 60 * 1000,
    expireDate: '2015/07/20 00:00:00'
};
// 增，插入一条数据
gs.save(item);
gs.save(item, function (res) {
    console.log(res);
});
// 删，删除一条数据
gs.del({keyName: 'localStorageKeyName'});
gs.del({keyName: 'localStorageKeyName'}, function (res) {
    console.log(res);
});
// 查，获取一条数据
gs.get({keyName: 'localStorageKeyName'});
gs.get({keyName: 'localStorageKeyName'}, function (res) {
    console.log(res);
});
// 改，修改一条数据
gs.update(item);
gs.update(item, function (res) {
    console.log(res);
});
// 获取指定键名的占用空间大小或整个空间被占用的大小
gs.getSize();
gs.getSize({keyName: 'localStorageKeyName'});
gs.getSize({keyName: 'localStorageKeyName'}, function (res) {
    console.log(res);
});
// 获取剩余空间大小
gs.getRemainSize();
gs.getRemainSize(function (res) {
    console.log(res);
});
// 清空全部数据
gs.flush();
gs.flush(function () {
    // do something
});
// 清空脏数据
gs._flushDirtyRead(0);
gs._flushDirtyRead(0,function () {
    // do something
});

源码

AceLing/localcache

附件

demo：后补

优化的功能点

（已优化）关于自动清除和获取剩余大小的功能；
（待完成）跨域通信问题；
（已舍弃）按照时间点和时间间隔结合设置过期时间；
（已更新）控制台输出开关，可指定turnOnLogger（开启或关闭console.log功能）；
（已更新）当localStorage满时，执行插入操作时，可指定isCleanDataWhenFull（开启或关闭满时清除过期数据的操作，开启则指定过期多久的数据需要被清除）；
（已更新）在程序运行时，可指定isCleanDirtyStorage（开启或关闭启动时是否清除脏数据）；
（已更新）获取localStorage剩余大小；
（已更新）执行flush操作时，对于非系统添加的数据进行豁免，避免了无谓的清空。