共计 1197 个字符，预计需要花费 3 分钟才能阅读完成。
一般情况下，很少会在前端进行加解密的操作，因为没有太大的必要性，前端的代码是很容易看到的，即使这样，我觉得还是有比较处理一下的，至少不让别人一眼就看到信息
我使用 localStorage 存储了一些用户的用户名昵称等的信息，通过 crypto-js 进行加解密处理，这里我选用了 AES 加密算法对 json 对象数据进行处理
按照官方的例子，如下
var CryptoJS = require(“crypto-js”);
var data = [{id: 1}, {id: 2}]
// Encrypt
var ciphertext = CryptoJS.AES.encrypt(JSON.stringify(data), ‘secret key 123’);
// Decrypt
var bytes = CryptoJS.AES.decrypt(ciphertext.toString(), ‘secret key 123′);
var decryptedData = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
console.log(decryptedData);
以上代码在 chrome 里运行没什么问题，可是在 Safari 的时候报了 malformed utf-8 data
可能是前端加解密的场景比较少，搜到若干报这个错的，但是鲜有解决方法，其中有一个说加密数据不是 8 的整数倍就会报上述错误解决方法：将数据加密后，再进行 base64 进行处理
let newUserInfo = {nickname:’hello’,email:’abc123@qq.com’};
// 加密数据
let encJson = cryptoJS.AES.encrypt(JSON.stringify(newUserInfo), ‘aes’).toString();
// 对加密数据进行 base64 处理, 原理：就是先将字符串转换为 utf8 字符数组，再转换为 base64 数据
let encData = cryptoJS.enc.Base64.stringify(cryptoJS.enc.Utf8.parse(encJson));
localStorage.setItem(‘userInfo’, encData);
// 将数据先 base64 还原，再转为 utf8 数据
let decData = cryptoJS.enc.Base64.parse(localStorage.getItem(‘userInfo’)).toString(cryptoJS.enc.Utf8);
// 解密数据
let decJson = cryptoJS.AES.decrypt(decData, ‘aes’).toString(cryptoJS.enc.Utf8);
userInfo = JSON.parse(decJson);
console.log(userInfo);
以上，在 safari，chrome，firefox 运行没问题