Object Nested Uint8Array(32) to String to btoa to localStorage to atob to Uint8Array(32)

如何解决Object Nested Uint8Array(32) to String to btoa to localStorage to atob to Uint8Array(32)

我在 javascript 方面的技能很少，我不确定如何在将原始 Uint8Array(32) 发送到 localStorage、解码并转换回 Uint8Array(32) 后获取它。下面您将看到我尝试将私钥字符串化，然后对其进行 base64 编码，以便将其发送到 localStorage 以供以后使用：

window.base642Array = function(base64) {
    var binStr = window.atob(base64);
    console.log("binStr"+ binStr);
    var l = binStr.length;
    var bytes = new Uint8Array(l);
    for (var i = 0; i < l; i++) {
        bytes[i] = binStr.charCodeAt(i);
    }
    return bytes.buffer;
}

在这里你会注意到我正在尝试获取私钥，以便我可以通过从 localStorage 中获取 base64 编码的字符串并从中创建一个新的 Uint8Array 来生成相应的公钥：

window.genPKey = function()
{
    console.log("getSKey flag: 0");

    var SKey = getSKey();

    console.log("getSKey flag: 1");

    var publicKey;
    if(SKey != null || undefined)
    {
        console.log(SKey);

        console.log("getSKey flag: 2");

        publicKey = eccrypto.getPublic(SKey);

        console.log("getSKey flag: 3");

        localStorage.setItem("pkey",window.btoa(JSON.stringify(publicKey)));

        return;

    }

    console.log("getSKey flag: alt");

    genSKey();
    genPKey();

    return;

window.getSKey = function()
{
    console.log("getSKey flag: 0");

    var SKey = localStorage.getItem("skey");

    var skey = base642Array(SKey);

    console.log("getSKey flag: 1");

    console.log("getSKey flag: 2");

    console.log(skey);

    return skey;
}

Uint8Array(32) [247,145,236,54,52,10,202,187,35,79,42,141,230,76,228,2,109,72,92,221,139,235,147,244,149,220,196,175,11,128]
0: 247
1: 145
2: 236
3: 54
4: 52
5: 10
6: 202
7: 187
8: 35
9: 79
10: 42
11: 141
12: 230
13: 76
14: 228
15: 2
16: 109
17: 228
18: 72
19: 92
20: 221
21: 139
22: 235
23: 147
24: 244
25: 10
26: 149
27: 220
28: 196
29: 175
30: 11
31: 128
offset: (...)
parent: (...)
buffer: (...)
byteLength: (...)
byteOffset: (...)
length: (...)
Symbol(Symbol.toStringTag): (...)
__proto__: Uint8Array

在这里您会看到输入的结果与输出的结果不同：

在

ArrayBuffer(141) {}
[[Int8Array]]: Int8Array(141)
[0 … 99]
[100 … 140]
__proto__: TypedArray
[[Uint8Array]]: Uint8Array(141)
[0 … 99]
[100 … 140]
__proto__: TypedArray
byteLength: (...)
__proto__: ArrayBuffer
byteLength: (...)
constructor: ƒ ArrayBuffer()
slice: ƒ slice()
Symbol(Symbol.toStringTag): "ArrayBuffer"
get byteLength: ƒ byteLength()
__proto__: Object
[[IsDetached]]: false

出

{{1}}

我认为问题可能在于使用 JSON.stringify 将嵌套的 Uint8Array 转换为字符串，但我不确定其他方法可以使此功能正常运行。

为什么对象输入和对象输出不一样？我想学习如何做到这一点，帮助对我来说意味着整个世界。

解决方法

一些问题：

• 尽管您使用了 JSON.stringify，但您从未使用过相反的操作，即 JSON.parse

• 您使用了 charCodeAt，但您从未使用过相反的操作，即 String.fromCharCode。 charCodeAt 与您制作字符串的操作无关，因此应该删除它。

• 在调试此类问题时，您应该消除步骤。例如，您会发现以下步骤与您的问题无关：

  • 从本地存储中存储和检索；
  • 与base64编码相互转换；
  • 使用加密库

  问题在于将类型化数组转换为字符串并返回。

转换为字符串和转换回类型数组根本不是彼此的颠倒。

要解决此问题，我建议将您必须调用的调用更改为 JSON.stringify，以便将字符串化为数组表示法（以 [ 开头）而不是普通对象表示法（以{）。所以改变：

JSON.stringify(secretKey);

到：

JSON.stringify(Array.from(secretKey));

然后将该字符串转回类型化数组，使用 JSON.parse:

new Uint8Array(JSON.parse(str))

这是一个没有不相关步骤的小演示：

function fromTypedArrayToString(arr) {
    return JSON.stringify([...arr]);
}

function fromStringToTypedArray(str) {
    return new Uint8Array(JSON.parse(str));
}

function compareTypedArrays(arr1,arr2) {
    if (arr1.length !== arr2.length) return false;
    for (let i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) return false;
    }
    return true;
}  

// Demo: make a typed array with all possible values
let arr = new Uint8Array([...Array(256).keys()]);
let str = fromTypedArrayToString(arr);
let arr2 = fromStringToTypedArray(str);
let consistent = compareTypedArrays(arr,arr2);
console.log("Is the result consistent:",consistent);

您应该能够将其应用到您的代码中，并逐步添加：

• base64 编码，虽然我看不到它的好处：字符串的大小会增长 30%。你可以没有这个。
• 本地存储
• 加密模块

在继续下一步之前，请继续检查操作是否可以反转，返回类型化数组的原始值，就像我在上面的代码片段中所做的那样。