javascript - 存储临时客户端数据

Question

我需要临时存储客户端数据。数据将在刷新或重定向时被丢弃。存储数据的最佳方式是什么？

通过将数据放入变量中来使用 javascript

var data = {
    a:"longstring",
    b:"longstring",
    c:"longstring",
}

或

将数据放在 html 元素中(如 data-attribute 放在 div 标签中)

<ul>
    <li data-duri="longstring"></li>
    <li data-duri="longstring"></li>
    <li data-duri="longstring"></li>
</ul>

临时存储的数据量可能会很多，因为我需要存储的数据是图像 dataUri，而一整天不刷新的用户可能会堆叠 500 多张大小为 50kb-3mb 的图像。 (我不确定这么多数据是否会因为内存消耗太多而导致应用程序崩溃。.如果我错了请纠正我。)

你们认为保存数据最有效的方法是什么？

Answer 1

我建议在 JavaScript 中存储，并且仅当您实际想要显示图像时才更新 DOM，假设不是同时存储所有图像。另请注意，当图像位于 DOM 中时，浏览器也会将图像存储在自己的内存中。

更新:由于评论已添加到 OP，我相信您需要回到客户要求和设计 - 缓存 500 x 3MB 图像是行不通的 - 考虑缩略图等？如果你真的需要那样做，这个答案只关注最佳的客户端缓存......

数据URI效率

Data URIs使用 base64这增加了大约 33% 的开销，表示 ASCII 中的二进制数据。

虽然需要 base64 来更新 DOM，但可以通过将数据存储为二进制字符串并使用 atob() and btoa() 进行编码和解码来避免开销。函数 - 只要您删除对原始数据的引用，就可以对其进行垃圾回收。

var dataAsBase64 = "iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

var dataAsBinary = atob(dataAsBase64);
console.log(dataAsBinary.length + " vs " + dataAsBase64.length);

// use it later
$('.foo').attr("src", "data:image/png;base64," + btoa(dataAsBinary));

字符串内存效率

How much RAM does each character in ECMAScript/JavaScript string consume?建议他们每个字符占用 2 个字节 - 虽然这仍然可能取决于浏览器。

这可以通过使用 ArrayBuffer 来避免。用于 1 对 1 字节存储。

var arrayBuffer = new Uint8Array(dataAsBinary.length );
for (i = 0; i < dataAsBinary.length; i++) {
    arrayBuffer[i] = dataAsBinary.charCodeAt(i);
}
// allow garbage collection
dataAsBase64 = undefined;

// use it later
dataAsBase64 = btoa(String.fromCharCode.apply(null, arrayBuffer));
$('.foo').attr("src", "data:image/png;base64," + btoa(dataAsBinary));

免责声明:请注意，所有这些都增加了很多复杂性，我只会在您确实发现性能问题时才建议进行此类优化。

替代存储

而不是使用浏览器内存

• local storage - 有限，通常为 10MB，当然不允许 - 没有特定浏览器配置的 500 x 3MB。
• Filesystem API - 尚未得到广泛支持，但理想的解决方案 - 可以创建临时文件以卸载到磁盘。