遇到这样一个问题，在初始化页面后获取完数据，进行填充页面，点击后，右侧显示基本信息，如下图所示
页面说明
由于再重新去数据库中搜索一次不现实，所以，就排除了这种做法，想的是将数据放在data-*中，作为<span>的属性带着，点击时，获取属性，进行解析后显示在右侧。
但是直接将一个json格式的数据放在html的属性中，会由于 "的原因，导致获取的时候不能获取到初始化放入的 json全貌。
一开始想到使用base64编码(btoa 和 atob)进行编译过后，再放入data-*的属性中带过去，但是编译时遇到了一个错误。
Uncaught DOMException: Failed to execute 'btoa' on 'Window':
The string to be encoded contains characters outside of the Latin1 range.(…)
为什么会报错呢?
The string to be encoded contains characters outside of the Latin1 range.
被编码的字符串包含Latin1范围以外的字符。
Latin1 是什么东西？
ISO/IEC8859-1，又称Latin-1或“西欧语言”，是国际标准化组织内ISO/IEC 8859的第一个8位字符集。以ASCII为基础，在空置的0xA0-0xFF的范围内，加入96个字母及符号，藉以供使用变音符号的拉丁字母语言使用。
看明白了吧，其实btoa只能转换占一个字节宽度的字符，就是Latin1字符集(它是ASCII的超集)。而中文汉字是被编码成占两个或以上个字节的。所以btoa方法无法对中文进行操作，于是就报了上面看到的错误。
简单记录一下base64的编码和解码
btoa 方法
btoa 是 Binary To ASCII 的简写，意思就是把二进制数据编码转换成Base64编码的ASCII字符串。且btoa(str) 方法是浏览器中的一个全局(顶级)方法。
atob 方法
与 btoa 相反 atob 是 ASCII To Binary 的简写，意思是把Base64格式的ASCII字符串进行Base64解码,得到原数据。atob 正是 btoa 方法的逆过程，并且它也是浏览器中的一个全局(顶级)方法。
url编码和字符串编码
既然中文汉字不能被编码，那么就将中文汉字转为URL编码后再进行编码。使用encodeURI、encodeURIComponent、decodeURI 和 decodeURIComponent这四个方法，然后我就发现了还有escape和unescape也可以进行编码。
简单来说，escape是对字符串(string)进行编码(而另外两种是对URL)，作用是让它们在所有电脑上可读。
编码之后的效果是%XX或者%uXXXX这种形式。
其中 ASCII字母、数字、@*/+ ，这几个字符不会被编码，其余的都会。
最关键的是，当你需要对URL编码时，请忘记这个方法，这个方法是针对字符串使用的，不适用于URL。
在什么情况下使用这三类编码解码方式呢？
1、如果只是编码字符串，不和URL有半毛钱关系，那么用escape。
2、如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。
3、当你需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。
然后回到我最初的需求，只是想将json传入data-*中作为参数，以便以后使用，所以，貌似也不需要转为base64编码，使用escape进行字符串编码，然后在使用时再进行解码即可。
网友评论