sessionStorage 或 localStorage 数据加密(转码)存储，获取时解码返回存储的明文

知识点，

atob，btoa，
encodeURIComponent，decodeURIComponent

下面是代码

1. 转译过数据通过 btoa 解码 atob 编码

//btoa从 String 对象中创建一个 base-64 编码的 ASCII 字符串，其中字符串中的每个字符都被视为一个二进制数据字节。
//一个字符串, 其字符分别表示要编码为 ASCII 的二进制数据的单个字节。

let encodedData = window.btoa('111ddddd'); //"MTExZGRkZGQ="

//返回值一个包含 stringToEncode 的 Base64 表示的字符串。

//对经过 base-64 编码的字符串进行解码。你可以使用 window.btoa() 方法来编码一个可能在传输过程中出现问题的数据，并且在接受数据之后，使用 atob() 方法再将数据解码。例如：你可以编码、传输和解码操作各种字符，比如 0-31 的 ASCII 码值。

//如果传入字符串不是有效的 base64 字符串，比如其长度不是 4 的倍数，则抛出 DOMException。

try{
	let decodedData = scope.atob('MTExZGRkZGQ='); //111ddddd
}

2. 第一步先实现 汉字转译以及转回 使用encodeURIComponent以及decodeURIComponent关键函数

//原字串作为URI组成部分被被编码后的新字符串。
encodeURIComponent('你好 你是JavaScript')//"%E4%BD%A0%E5%A5%BD%20%E4%BD%A0%E6%98%AFJavaScript"
//一个解码后的统一资源标识符（URI）字符串，处理前的URI经过了给定格式的编码。

try{
decodeURIComponent("%E4%BD%A0%E5%A5%BD%20%E4%BD%A0%E6%98%AFJavaScript") //"你好 你是JavaScript"
}

3. 等等，为什么不直接用atob，btoa，来转译非要用 encodeURIComponent，decodeURIComponent 再来转一次

btoa() 不支持中文, 经查资料发现, btoa 方法仅支持 ASCII 编码 , atob()转换含有中文的 base64编码的时候中文部分会变为乱码.详情如下:

window.btoa('王五')
//Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

因为直接用atob会导致汉字乱码，
btoa它来解码的时候数据不对 encodeURIComponent 先把数据转换一次，把汉字转译
decodeURIComponent 把转译的数据转回来，就解决了atob 方法汉字乱码问题

let set = encodeURIComponent('李四'),result = btoa(set); // %E6%9D%8E%E5%9B%9B

let jieMi = atob('%E6%9D%8E%E5%9B%9B'), jieM = decodeURIComponent(jieMi); //李四

3. 使用ES6语法封装为一个sessionStorage 或 localStorage 数据加密的函数

原生js

  class  Session  {
  				/**
  				 * 加密数据
  				 * @param {any} data 转为base64数据
  				 */
  				encrypt(data){
  					let set = encodeURIComponent(data),result = btoa(set);
  					return result;
  				}
  				/**
  				 * 解码数据
  				 * @param {any} data 数据
  				 */
  				MyLocker(data){
  					try{
  						let jieMi = atob(data), jieM = decodeURIComponent(jieMi);
  						return jieM;
  					}catch(e){
  						throw Error('解码出错')
  					}
  				}
  				/**
  				 *  根据参数区分存储对象
  				 * @param Session
  				 * @returns {Storage} 返回 Session 存储对象
  				 */
  				isSession(Session){
  					return Session ? localStorage :sessionStorage;
  				}
  				/**
  				 * 判断该当前的key 是否存在
  				 * @param key
  				 * @constructor
  				 */
  				ISKET(key){
  					if(!key){
  						throw Error('请传入Session的KEY!!!')
  					}
  				}
  				/**
  				 * Session存储方法
  				 * @param key 存储的key值
  				 * @param setObj 存储的数据
  				 * @param Session 存储 localStorage 还是 sessionStorage 默认 sessionStorage
  				 */
  				setSession(key,setObj,Session){
					// console.log(this);
  					this.ISKET(key);
  					if(Object.keys(setObj).length > 0){
  						setObj = JSON.stringify(setObj);
  					}
  					
  				let Storage = Session ? localStorage :sessionStorage;
  				
  				this.isSession(Session).setItem(this.encrypt(key),this.encrypt(setObj));
  				}
  				/**
  				 * 获取存储的值
  				 * @param key 存储的key
  				 * @param Session  存储 localStorage 还是 sessionStorage 默认 sessionStorage
  				 * @returns {any} 返回对应的key 的数据
  				 */
  				getSession(key,Session){
  					this.ISKET(key);
  					let data = this.isSession(Session).getItem(this.encrypt(key));
  					if(data){
  						try{
  							return  JSON.parse(this.MyLocker(data))
  						}catch(e){
  							console.error('getSession方法获取数据错误');
  							return false
  						}
  					}
  				}
  				sessionClear(key,Session){
  					this.ISKET(key);
  					this.isSession(Session).removeItem()(key)
  				}
  				sessionClearAll(Session){
  					this.isSession(Session).clear();
  				}
  			};

			let set = new  Session();
			set.setSession(123,{name:'张三',data:[1,2,3,4,5],msg:'终端设备是副科级多喝水广发卡见鬼十法卡的很发生过哈师大'})
			console.log(set.getSession(123));

效果
转码

解码

vue 使用注意事项
比如新建一个js 文件 把代码放进去 导出 直接 export Session {…} 使用的时候需要 new实例化，但是这里会出问题!!！ 因为实例化的时候会改类里面的this指向 这个时候就需要 到处去实例化好的对象 就不会出现 this 指向问题导致的报错 export const StorageClass = new class Session{…}

最后

以上就是正直电脑为你收集整理的sessionStorage 或 localStorage 数据加密(转码)存储，获取时解码返回存储的明文的全部内容，希望文章能够帮你解决sessionStorage 或 localStorage 数据加密(转码)存储，获取时解码返回存储的明文所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。