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

Question

我有 16 个字节的数据存储在 Uint8Array 中。我需要将此数据存储在浏览器中，并且必须在其他 class.

中获取它

所以我的代码如下所示：

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

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

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

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

如何在浏览器中存储 Uint8array 并使用 localStorage 在其他 class 中以相同的方式获取它？提前致谢。

Answer 1

很难...

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

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

要将您的 TypedArray 字符串化以便它可以存储在本地存储中，您需要一个一个地提取所有值并将它们移动到一个数组中，或者，如果可用，只需调用 Array.from( yourTypedArray) 然后将这个数组字符串化：

const typedArray = new Uint8Array(16);
crypto.getRandomValues(typedArray);
const arr = Array.from // if available
  ? Array.from(typedArray) // use Array#from
  : [].map.call(typedArray, (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);

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

How to Store Uint8array in the browser with localstorage using javascript

javascript

local-storage

initialization-vector

typed-arrays

typescript