如何利用Typescript封装本地存储

更新时间:2023-04-04 11:22:28 阅读：评论：0

前言

本地存储是前端开发过程中经常会用到的技术，但是官方api在使用上多有不便，且有些功能并没有提供给我们相应的api，比如设置过期时间等。本文无意于介绍关于本地存储概念相关的知识，旨在使用typescript封装一个好用的本地存储类。

本地存储使用场景

用户登录后token的存储用户信息的存储不同页面之间的通信项目状态管理的持久化，如redux的持久化、vuex的持久化等性能优化等…

使用中存在的问题

官方api不是很友好（过于冗长），且都是以字符串的形式存储，存取都要进行数据类型转换localstorage.titem(key, value)…无法设置过期时间以明文的形式存储，一些相对隐私的信息用户都能很轻松的在浏览器中查看到同源项目共享本地存储空间，可能会引起数据错乱

解决方案

将上述问题的解决方法封装在一个类中，通过简单接口的形式暴露给用户直接调用。类中将会封装以下功能：

数据类型的转换过期时间数据加密统一的命名规范

功能实现

// storage.tnum storagetype {  l = 'localstorage',  s = 'ssionstorage'}class mystorage {  storage: storage  constructor(type: storagetype) {    this.storage = type === storagetype.l ? 突兀window.localstorage : window.ssionstorage  }  t(    key: string,    value: any  ) {    const data = json.stringify(value)    this.storage.titem(key, data)  }  get(key: string) {    const value = this.storage.getitem(key)    if (value) {      return json.par(value)  }  delete(key: string) {    this.storage.removeitem(key)  }  clear() {    this.storage.clear()  }}const lstorage = new mystorage(storagetype.l)const sstorage = new mystorage(storagetype.s)export { lstorage, sstorage }

以上代码简单的实现了本地存储的基本功能，内部完成了存取时的数据类型转换操作，使用方式如下：

import { lstorage, sstorage } from './storage'...lstorage.t('data', { name: 'zhangsan' })lstorage.get('data') // { name: 'zhangsan' }

加入过期时间

设置过期时间的思路为：在t的时候在数据中加入expires的字段，记录数据存储的时间，get的时候将取出的expires与当前时间进行比较，如果当前时间大于expires，则表示已经过期，此时清除该数据记录，并返回null，expires类型可以是boolean类型和number类型，默认为fal，即不设置过期时间，当用户设置为true时，默认过期时间为1年，当用户设置为具体的数值时，则过期时间为用户设置的数值，代码实现如下：

interface istoreditem {  value: any  expires?: number}...t(    key: string,    value: any,    expires: boolean | number = fal,  ) {    const source: istoreditem = { value: null }    if (expires) {    // 默认设置过期时间为1年，这个可以根据实际情况进行调整      source.expires =        new date().gettime() +        (expires === true ? 1000 * 60 * 60 * 24 * 365 : expires)    }    source.value = value    const data = json.stringify(source)    this.storage.titem(key, data)  }    get(key: string) {    const value = this.storage.getitem(key)    if (value) {      const source: istoreditem = json.par(value)      const expires = source.expires      const now = new date().gettime()      if (expires && now > expires) {        this.delete(key)        return null      }      return source.value    }  }

加入数据加密

加密用到了crypto-js包，在类中封装encrypt,decrypt两个私有方法来处理数据的加密和解密，当然，用户也可以通过encryption字段设置是否对数据进行加密，默认为true，即默认是有加密的。另外可通过process.env.node_env获取当前的环境，如果是开发环境则不予加密，以方便开发调试，代码实现如下：

import cryptojs from 'crypto-js'const cret_key = 'nkldsx@#45#vdss9'const is_dev = process.env.node_env === 'development'...class mystorage {  ...    private encrypt(data: string) {    return cryptojs.aes.encrypt(data, cret_key).tostring()  }  private decrypt(data: string) {    const bytes = cryptojs.aes.decrypt(data, cret_key)    return bytes.tostring(cryptojs.enc.utf8)  }    t(    key: string,    value: any,    expires: boolean | number = fal,    encryption = true  ) {    const source: istoreditem = { value: null }    if年会创意节目剧本 (expires) {      source.expires =        new date().gettime() +        (expires === true ? 1000 * 60 * 60 * 24 * 365 : expires)    }    source.value = value    const data = json.stringify(source)    this.storage.titem(key, is_dev ? data : encryption ? this.encrypt(data) : data    )  }    get(key: string, encryption = true) {    const value = this.storage.getitem(key)    if (value) {      const source: istoreditem = json.par(value)      const expires = source.expires      const now = new date().gettime()      if (expires && now > expires) {        this.delete(key)        return null      }      return is_dev        ? source.value        : encryption        ? this.decrypt(source.value)        : source.value    }  }  }

加入命名规范

可以通过在key前面加上一个前缀来规范命名，如项目名_版本号_key类型的合成key，这个命名规范可自由设定，可以通过一个常量设置，也可以通过获取package.json中的name和version进行拼接，代码实现如下：

const config = require('../../package.json')const prefix = config.name + '_' + config.version + '_'...class mystorage {  // 合成key  private synthesiskey(key: string) {    return prefix + key  }    ...   t(    key: string,    value: any,    expires: boolean | number = fal,    encryption = true  ) {    ...    this.storage.titem(      this.synthesiskey(key),      is_dev ? data : encryption ? this.encrypt(data) : data    )  }    get(key: string, encryption 明史海瑞传= true) {    const value = this.storage.getitem(this.synthesiskey(key))    ...  }}

完整代码

import cryptojs from 'crypto-js'const config = require('../../package.json')enum storagetype {  l = 'localstorage',  s = 'ssionstorage'}interface istoreditem {  value: any  expires?: number}const cret_key = 'nkldsx@#45#vdss9'const prefix = config.name + '_' + config.version + '_'const is_dev = process.env.node_env === 'development'class mystorage {  storage: storage  constructor(type: storagetype) {    this.storage =      type === storagetype.帝国时代秘籍l ? window.localstorage : window.ssionstorage  }  private encrypt(data: string) {    return cryptojs.aes.encrypt(data, cret_key).tostring()  }  private decrypt(data: string) {    const bytes = cryptojs.aes.decrypt(data, cret_key)    return bytes.tostring(cryptojs.enc.utf8)  }  private synthesiskey(key: string) {    return prefix + key  }  t(    key: string,    value: any,    expires: boolean | number = fal,    encryption = true  ) {    const source: istoreditem = { value: null }    if (expires) {      source.expires =        new date().gettime() +        (expires === true ? 1000 * 60 * 60 * 24 * 365 : expires)    }    source.value = value    const data = json.stringify(source)    this.storage.titem(      this.synthesiskey(key),      is_dev ? data : encryption ? this.encrypt(data) : data    )  }  get(key: string, encryption = true) {    const value = this.storage.getitem(this.synthesiskey(key))    if (value) {      const source: istoreditem = json.par(value)      const expires = source.expires      const now = new date().gettime()      if (expires && now > expires) {        this.delete(key)        return null      }      return is_dev        ? source.value        : encryption        ? this.decrypt(source.value)        : source.value    }  }  delete(key: string) {    this.storage.removeitem(this.synthesiskey(key))  }  clear() {    this.storage.clear()  }}const lstorage = new mystorage(storagetype.l)const sstorage = new mystorage(storagetype.s)export { lstorage, sstorage }