JavaScript常用技巧：stroage封装

本地存储的封装

const TWO_DAY_MIN = 60 * 60 * 24 * 2interface IConfig {type: 'localStorage' | 'sessionStorage'prefix: stringexpire: numberisEncrypt: boolean
}const config: IConfig = {type: 'localStorage', // 本地存储类型 localStorage/sessionStorageprefix: 'atp_1.0', // 名称前缀 建议：项目名 + 项目版本expire: TWO_DAY_MIN, //过期时间 单位：秒isEncrypt: true // 默认加密 为了调试方便, 开发过程中可以不加密
}// 名称前自动添加前缀
const autoAddPrefix = (key: string): string => {const prefix = config.prefix ? config.prefix + '_' : ''return prefix + key
}// 设置 setStorage
export const setStorage = (key: string, value: unknown, expire = TWO_DAY_MIN) => {const prefixKey = autoAddPrefix(key)if (value === '' || value === null || value === undefined) {value = null}if (isNaN(expire) || expire < 1) {throw new Error('Expire must be a number')}expire = (expire ? expire : config.expire) * 60000const data = {value: value, // 存储值time: Date.now(), //存值时间戳expire: expire // 过期时间}window[config.type].setItem(prefixKey, JSON.stringify(data))
}// 删除 removeStorage
export const removeStorage = (key: string) => {const prefixKey = autoAddPrefix(key)window[config.type].removeItem(prefixKey)
}// 获取 getStorage
export const getStorage = (key: string) => {const prefixKey = autoAddPrefix(key)// key 不存在判断if (!window[config.type].getItem(prefixKey) || JSON.stringify(window[config.type].getItem(prefixKey)) === 'null') {return null}// 优化 持续使用中续期const storage = JSON.parse(window[config.type].getItem(prefixKey))console.log(storage)const nowTime = Date.now()console.log(config.expire * 6000, nowTime - storage.time)// 过期删除if (storage.expire && config.expire * 6000 < nowTime - storage.time) {removeStorage(prefixKey)return null} else {// 未过期期间被调用 则自动续期 进行保活setStorage(key, storage.value)return storage.value}
}// 获取全部 getAllStorage
export const getAllStorage = () => {const len = window[config.type].length // 获取长度const arr = [] // 定义数据集for (let i = 0; i < len; i++) {// 获取key 索引从0开始const getKey: string | null = window[config.type].key(i)// 获取key对应的值const getVal = window[config.type].getItem(getKey)// 放进数组arr[i] = { key: getKey, val: getVal }}return arr
}// 清空 clearStorage
export const clearStorage = () => {window[config.type].clear()
}export default {get: getStorage,set: setStorage,remove: removeStorage,getAll: getAllStorage,clear: clearStorage
}

JavaScript常用技巧：stroage封装相关推荐

Javascript 常用技巧 [2]
Javascript 常用技巧 [2] /** 请问如何去掉主页右面的滚动条?  <!-- & ...
【JavaScript学习】JavaScript 常用工具类封装
文章目录 1.JavaScript 常用工具类封装 (1)获得浏览器地址所有参数 (2)将json转为get参数 (3)格式校验工具类 (4)数组操作工具类 (5)表单取值工具类 (6)时间转换工具类 ...
javascript 常用技巧
如内容超出单元格,则隐藏 style="TABLE-LAYOUT: fixed" 让弹出窗口总是在最上面: <body οnblur="this.focus();& ...
Javascript 常用技巧55例
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border οncοntextmenu ...
Jquery和javascript常用技巧
var objSel = document.getElementById("selOp"); //这是获取值 ...
javascript常用技巧
1. οncοntextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border ο ...
javascript常用技巧归纳
最近归纳了下,发现还很多的哦 1 javascript捕捉方向键 <HTML> <HEAD> <title>反选</title> <scrip ...
JavaScript常用工具方法封装
因为工作中经常用到这些方法,所有便 JavaScript 1. type 类型判断 isString (o) { //是否字符串return Object.prototype.toString.cal ...
javascript常用工具类封装
字符串工具类,仅供参考 StringUtils = {isEmpty: function(input) {return input == null || input == '';},isNotEmpt ...

JavaScript常用技巧：stroage封装

JavaScript常用技巧：stroage封装相关推荐

最新文章

热门文章