javascript中的window.btoa與window.atob的簡單加解密

 

WindowOrWorkerGlobalScope.btoa()  從 String 對象中創建一個 base-64 編碼的 ASCII 字符串，其中字符串中的每個字符都被視爲一個二進制數據字節。

Note: 由於這個函數將每個字符視爲二進制數據的字節，而不管實際組成字符的字節數是多少，所以如果任何字符的碼位超出 0x00 ~ 0xFF 範圍，則會引發 InvalidCharacterError 異常。請參閱 Unicode_字符串 ，該示例演示如何編碼字符數超出 0x00 ~ 0xFF 範圍的字符串

語法

let encodedData = window.btoa(stringToEncode);

參數

stringToEncode

一個字符串, 其字符分別表示要編碼爲 ASCII 的二進制數據的單個字節。

返回值

    一個包含 stringToEncode 的 Base64 表示的字符串。

示例

let encodedData = window.btoa("Hello, world"); // base64 編碼
let decodedData = window.atob(encodedData); // 解碼 成 ASCII

備註

你可以使用此方法對可能導致通信問題的數據進行編碼，傳輸，然後使用atob()方法再次解碼數據。例如，您可以編碼控制字符，例如ASCII值0到31。

在用javascript編寫XPCOM組件時, btoa()方法也是可用的，雖然全局對象已經不是Window了。

Unicode 字符串

在多數瀏覽器中，使用btoa() 對Unicode字符串進行編碼都會觸發InvalidCharacterError異常。

一種選擇是轉義任何擴展字符，以便實際編碼的字符串是原始字符的ASCII表示形式。考慮這個例子，代碼來自Johan Sundström：

// ucs-2 string to base64 encoded ascii
function utoa(str) {
    return window.btoa(unescape(encodeURIComponent(str)));
}
// base64 encoded ascii to ucs-2 string
function atou(str) {
    return decodeURIComponent(escape(window.atob(str)));
}
// Usage:
utoa('✓ à la mode'); // 4pyTIMOgIGxhIG1vZGU=
atou('4pyTIMOgIGxhIG1vZGU='); // "✓ à la mode"

utoa('I \u2661 Unicode!'); // SSDimaEgVW5pY29kZSE=
atou('SSDimaEgVW5pY29kZSE='); // "I ♡ Unicode!"

更好，更可靠，更廉價的解決方案是使用類型化數組進行轉換。

 

WindowOrWorkerGlobalScope.atob() 對經過 base-64 編碼的字符串進行解碼。你可以使用 window.btoa() 方法來編碼一個可能在傳輸過程中出現問題的數據，並且在接受數據之後，使用 atob() 方法再將數據解碼。例如：你可以編碼、傳輸和解碼操作各種字符，比如 0-31 的 ASCII 碼值。

關於針對 Unicode 或者 UTF-8 的應用方面，請查看 this note at Base64 encoding and decoding 和 btoa() 的備註。

語法

var decodedData = scope.atob(encodedData);

異常

如果傳入字符串不是有效的 base64 字符串，比如其長度不是 4 的倍數，則拋出DOMException。

示例

let encodedData = window.btoa("Hello, world"); // 編碼
let decodedData = window.atob(encodedData);    // 解碼

          if (this.$route.query.main_id) {
                try {
                  if (isNaN(Number(window.atob(this.$route.query.main_id)))) {
                    this.$router.push({
                      path: "home"
                    });
                  } else {
                    let resData = await ajaxTool.Post('goods/get-goods-address',{main_id:window.atob(this.$route.query.main_id)});
                    let url = resData.data.input_goods_address;
                    this.goods_url = url;
                  }
                }
                catch (e) {
                  this.$router.push({
                    path: "home"
                  });
                }
          }