溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關怎么利用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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
