将 css 背景设置为本地存储中的图像

我希望将 base64 格式的图像存储在密钥中的本地存储中ImgStorage在CSS背景中像这样：

data:image/png;base64,iVBORw0KGgoAAAANS......

到目前为止，我尝试了两种方法：

1）从存储加载并放入css标签：

var TheImage = localStorage.getItem('ImgStorage');
$('body').css({ 'background-image': "url(" + TheImage) });

2）从存储数据重新创建画布：

var Canvas = document.createElement("canvas");
Canvas.width = 50;
Canvas.height = 50;
var Context = Canvas.getContext("2d");

var TheImage = localStorage.getItem('ImgStorage');

Context.drawImage(TheImage, 0, 0);
Canvas.toDataURL("image/png");

$('body').css({ 'background-image': "url(" + Canvas.toDataURL("image/png") + ")" });

我在网上环顾四周，但所有示例都讨论了在存储中获取图像以在内部渲染<img> tag.

有人解决了css背景的这个问题吗？

顺便说一句，就性能而言，如果您对图像进行 Base64 编码，则可以将它们发送到 HTML 页面的正文中，而无需任何其他请求。例如，如果您需要为 UI 加载 20 个图像，则请求数会减少 20 个。而且，如果您将每个图像存储在本地存储中，则只需加载它们一次。不适用于较旧的浏览器，因此它仅适用于 80% 的浏览器，但仍然...需要考虑，因为就浏览器的发展而言，时间站在您这一边。

好的，这是为那些跳来跳去后来到此页面的人准备的：我可以使用了！！！！

使用选项 1)，您只需编写以下内容：

var TheImage = localStorage.getItem('ImgStorage');
$('body').css({ 'background-image': "url(" + TheImage + ")" });

换句话说，您不需要像我尝试使用选项 2）那样浪费时间重新创建画布，只需直接进行即可。