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

Posted 2023-03-05

【中文标题】如何使用 javascript 在浏览器中使用 localstorage 存储 Uint8array

【英文标题】：How to Store Uint8array in the browser with localstorage using javascript

【发布时间】：2019-02-24 10:40:47

【问题描述】：

我有 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 在其他类中以相同的方式获取它？提前致谢。

【问题讨论】：

我在firefox中尝试时可以看到您保存和检索的本地存储数据是相同的。请同时发布您的输出。

@KrishnadasPC 我刚刚做到了！感谢您的意见！

或者使用专门设计用于将二进制数据以紧凑形式存储为字符串的 Base-64。不幸的是，内置的 atob 和 btoa 函数在这里不会受到影响，因此这种方法需要自定义实现。

【参考方案1】：

很难……

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

---

---

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

要对您的 TypedArray 进行字符串化以便将其存储在 localStorage 中，您需要一个一个地提取所有值并将它们移动到一个数组中，或者，如果可用，只需调用 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);

【讨论】：

非常感谢，您能否在第 3 行定义您对这个 const 数组以及我们和 str && Json 解析 (Str) 步骤时做了什么？它对我来说有点先进..非常感谢

对于arr = 部分，它是一个三元运算符。它首先检查 Array.from 是否存在，然后使用它，否则使用 TypedArray.map。对于str && JSON.parse(...，它实际上没用;-)（是为了避免可能出现JSON.parse(null)，但这不会抛出，所以我会删除它。

这比将其转换为十六进制的存储效率要低，不是吗？