将src属性的内容保存在localstorage中

Question

我正在开发一个在线操作系统 我想将应用程序图标保存在本地存储中，但我不知道应该如何将 src 属性的内容保存在本地存储中并在应用程序页面上再次读出。我当前的代码会导致空白页。

Answer 1

您只是想保存源 URL 吗？还是图像内容？

您可以通过以下方式保存源 URL：

var theImage = document.getElementById('my-special-image');
if (window.localStorage) {
     window.localStorage['theImage_src'] = theImage.src;
}

如果您想保存图像的内容，那么您必须对画布进行一些摆弄，使用
canvas.toDataURL()。有关如何执行此操作的更多信息，请参阅这篇文章。

Answer 2

据我所知没有办法做到这一点。您可以保存到本地存储的所有内容都必须由变量引用。当调用 localStorage.setItem 方法时，该值将转换为字符串格式。

localStorage.setItem('my', {a: 1});

console.log(localStorage['my']); // you will get a string value: '[object Object]'

Answer 3

图标是用户提供的还是您自己的？无论哪种情况，都请将应用程序图标转换为 base64。然后将其粘贴到localStorage中。当然，您必须对要存储的数据进行字符串化。

var base64 = localStorage.getItem('icon_name');
$('#imgid').attr('src', base64);