这篇文章给大家分享的是有关怎么利用Typescript封装本地存储的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
用户登录后token的存储
用户信息的存储
不同页面之间的通信
项目状态管理的持久化，如redux的持久化、vuex的持久化等
性能优化等
...
官方api不是很友好（过于冗长），且都是以字符串的形式存储，存取都要进行数据类型转换
localStorage.setItem(key, value)
...
无法设置过期时间
以明文的形式存储，一些相对隐私的信息用户都能很轻松的在浏览器中查看到
同源项目共享本地存储空间，可能会引起数据错乱
将上述问题的解决方法封装在一个类中，通过简单接口的形式暴露给用户直接调用。 类中将会封装以下功能：
数据类型的转换
过期时间
数据加密
统一的命名规范
// storage.ts
enum StorageType {
l = 'localStorage',
s = 'sessionStorage'
}
class MyStorage {
storage: Storage
constructor(type: StorageType) {
this.storage = type === StorageType.l ? window.localStorage : window.sessionStorage
}
set(
key: string,
value: any
) {
const data = JSON.stringify(value)
this.storage.setItem(key, data)
}
get(key: string) {
const value = this.storage.getItem(key)
if (value) {
return JSON.parse(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.set('data', { name: 'zhangsan' })
LStorage.get('data') // { name: 'zhangsan' }设置过期时间的思路为：在set的时候在数据中加入expires的字段，记录数据存储的时间，get的时候将取出的expires与当前时间进行比较，如果当前时间大于expires，则表示已经过期，此时清除该数据记录，并返回null，expires类型可以是boolean类型和number类型，默认为false，即不设置过期时间，当用户设置为true时，默认过期时间为1年，当用户设置为具体的数值时，则过期时间为用户设置的数值，代码实现如下：
interface IStoredItem {
value: any
expires?: number
}
...
set(
key: string,
value: any,
expires: boolean | number = false,
) {
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.setItem(key, data)
}
get(key: string) {
const value = this.storage.getItem(key)
if (value) {
const source: IStoredItem = JSON.parse(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 SECRET_KEY = 'nkldsx@#45#VDss9'
const IS_DEV = process.env.NODE_ENV === 'development'
...
class MyStorage {
...
private encrypt(data: string) {
return CryptoJS.AES.encrypt(data, SECRET_KEY).toString()
}
private decrypt(data: string) {
const bytes = CryptoJS.AES.decrypt(data, SECRET_KEY)
return bytes.toString(CryptoJS.enc.Utf8)
}
set(
key: string,
value: any,
expires: boolean | number = false,
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.setItem(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.parse(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
}
...
set(
key: string,
value: any,
expires: boolean | number = false,
encryption = true
) {
...
this.storage.setItem(
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 = 'sessionStorage'
}
interface IStoredItem {
value: any
expires?: number
}
const SECRET_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.sessionStorage
}
private encrypt(data: string) {
return CryptoJS.AES.encrypt(data, SECRET_KEY).toString()
}
private decrypt(data: string) {
const bytes = CryptoJS.AES.decrypt(data, SECRET_KEY)
return bytes.toString(CryptoJS.enc.Utf8)
}
private synthesisKey(key: string) {
return PREFIX + key
}
set(
key: string,
value: any,
expires: boolean | number = false,
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.setItem(
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.parse(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 }感谢各位的阅读！关于“怎么利用Typescript封装本地存储”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
