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

我希望将一个base64格式的图像存储在本地存储中的键

ImgStorage

中，就像css背景中的这样：

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

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

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

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

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") + ")" });

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

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

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") + ")" });

我已经在网上浏览过了，但是所有的例子都谈到了如何在

标记中获取存储中的图像

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

---

另外，在性能方面，如果您对图像进行base64编码，则可以在HTML页面的正文中发送图像，而无需任何其他请求。例如，如果您需要为您的UI加载20个图像，则可以减少20个请求。而且，如果将每个图像存储在本地存储器中，则只需加载它们一次。不适用于较旧的浏览器，因此它只适用于80%的浏览器，但仍然。。。。有些事情要考虑，因为时间在浏览器的进化方面是你的。

< P> OK，这是针对那些在跳转之后来到这个页面的人：我得到它去工作了！！！p> 使用选项1），您只需编写以下内容：

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

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