如何使用javascript使用本地存储在浏览器中存储Uint8array

Question

我有16个字节的数据存储在Uint8Array中。我需要将此数据存储在浏览器中，并且必须在其他一些类中获取它。

所以我的代码如下：

const ivBytes = window.crypto.getRandomValues(new Uint8Array(16));
localStorage.setItem("iv",JSON.stringify(ivBytes))
console.log("content of ivBytes:" + ivBytes)

在其他课程中，我尝试获取像这样的数据，但是它不起作用

let array = JSON.parse(localStorage.getItem("iv"))
console.log("the iv value we get is: " + ivBytes)

但是当我尝试获取数组的内容时，它并没有给我确切的ivBytes的内容。输出如下：

如何将Uint8array存储在浏览器中，并使用localStorage在其他类中以相同的方式获取它？预先感谢。

Answer 1

很难...

Uint8Array只是ArrayBuffer上的视图，它是保存在内存中的二进制数据。
因此，我的一般建议是不要在localStorage中存储二进制数据，因为localStorage只能存储字符串，并且还有其他可以处理二进制数据的存储API，例如IndexedDB。

---

---

但是，这里您想要存储的似乎只是从加密API中获得的随机生成的数字，并且由于它是我们正在谈论的非常小的ArrayBuffer，因此...

要对您的TypedArray进行字符串化以便可以将其存储在localStorage中，您需要一个一个地提取所有值并将它们移到Array中，或者，如果可以的话，只需调用Array.from（yourTypedArray）然后对此数组进行字符串化：

const typedArray = new Uint8Array(16);
crypto.getRandomValues(typedArray);
const arr = Array.from // if available
  ? Array.from(typedArray) // use Array#from
  : typedArray.map(v => v); // otherwise map()
// now stringify
const str = JSON.stringify(arr);
console.log(str);
// localStorage.setItem('foo', str);

// and to retrieve it...
// const str = localStorage.getItem('foo');
const retrievedArr = JSON.parse(str);
const retrievedTypedArray = new Uint8Array(retrievedArr);
console.log(retrievedTypedArray.byteLength);