crypto-js进行字符串的加密解密（可搭配localStorage使用）

最新推荐文章于 2024-10-04 09:59:24 发布

有点方阿

最新推荐文章于 2024-10-04 09:59:24 发布

阅读量1.7k

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/jojo1001/article/details/128233328

版权

本文介绍如何利用crypto-js库实现AES加密与解密，并结合localStorage进行数据的安全存储与读取。具体步骤包括：设置十六进制密钥与偏移量、定义加密解密函数、读写localStorage中加密数据。

摘要由CSDN通过智能技术生成

1.导入crypto-js

导入crypto-js然后，需要设置自己的秘钥

import CryptoJS from 'crypto-js'

// 十六位十六进制数作为密钥
const SECRET_KEY = CryptoJS.enc.Utf8.parse('1234123412341234')
// 十六位十六进制数作为密钥偏移量
const SECRET_IV = CryptoJS.enc.Utf8.parse('1234123412341234')

2.加密

对字符串进行加密

/**
 * 加密方法
 * @param data - 数据
 */
function encrypt(data: string) {
  const dataHex = CryptoJS.enc.Utf8.parse(data)
  const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
    iv: SECRET_IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  return encrypted.ciphertext.toString()
}

3.解密

对字符串进行解密

/**
 * 解密方法
 * @param data - 数据
 */
function decrypt(data: string) {
  const encryptedHexStr = CryptoJS.enc.Hex.parse(data)
  const str = CryptoJS.enc.Base64.stringify(encryptedHexStr)
  const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
    iv: SECRET_IV,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7
  })
  const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  return decryptedStr.toString()
}

4. 搭配localStorage使用

从localStorage读取数据

/**
 * 从localStorage读取数据
 * @param dataName - localStorage中key值
 */
const getData = (dataName: string) => {
  try {
    const rlt = localStorage.getItem(dataName)
    if (rlt === null) return null
    return decrypt(rlt)
  } catch (err) {
    throw new Error('localStorage数据获取错误')
  }
}

存数据至localStorage

/**
 * 存数据至localStorage
 * @param dataName - localStorage中key值
 * @param text - 存储的数据
 */
const setData = async (dataName: string, text: string) => {
  localStorage.setItem(dataName, encrypt(text))
}