问题描述
|
例如,假设用户将一些非常大的图像或媒体文件加载到您的Web应用程序中。当它们返回时,您希望您的应用程序显示它们先前已加载的内容,但由于数据太大而无法将实际文件数据保留在LocalStorage中。
解决方法
localStorage
是不可能的。存储在“ 0”中的数据必须是可以序列化的原始类型之一。这不包括“ 2”对象。
例如,这将无法正常运行:
var el = document.createElement(\'input\');
el.type=\'file\';
el.onchange = function(e) {
localStorage.file = JSON.stringify(this.files[0]);
// LATER ON...
var reader = new FileReader();
reader.onload = function(e) {
var result = this.result; // never reaches here.
};
reader.readAsText(JSON.parse(localStorage.f));
};
document.body.appendChild(el);
解决方案是使用更强大的存储选项,例如将文件内容写入HTML5文件系统或将其存储在IndexedDB中。
, 从技术上讲,如果您只需要在localStorage中保存小文件,则可以。
只是base64有用,因为它是一个字符串,所以它是localStorage友好的。
我认为localStorage的限制为〜5MB。 base64字符串的文件大小非常小,因此这是存储小图像的可行方法。如果您使用这种懒惰的方式,则不利之处是您必须注意5MB的限制。我认为这可能是一个解决方案,具体取决于您的需求。
, 是的,这是可能的。您可以将有关所需文件的任何信息插入LocalStorage,只要将其序列化为支持的原始类型之一即可。您还可以将整个文件序列化到LocalStorage中,然后在需要时稍后进行检索,但是文件大小受浏览器的限制。
下面显示了如何使用两种不同的方法来实现此目的:
(function () {
// localStorage with image
var storageFiles = JSON.parse(localStorage.getItem(\"storageFiles\")) || {},elephant = document.getElementById(\"elephant\"),storageFilesDate = storageFiles.date,date = new Date(),todaysDate = (date.getMonth() + 1).toString() + date.getDate().toString();
// Compare date and create localStorage if it\'s not existing/too old
if (typeof storageFilesDate === \"undefined\" || storageFilesDate < todaysDate) {
// Take action when the image has loaded
elephant.addEventListener(\"load\",function () {
var imgCanvas = document.createElement(\"canvas\"),imgContext = imgCanvas.getContext(\"2d\");
// Make sure canvas is as big as the picture
imgCanvas.width = elephant.width;
imgCanvas.height = elephant.height;
// Draw image into canvas element
imgContext.drawImage(elephant,elephant.width,elephant.height);
// Save image as a data URL
storageFiles.elephant = imgCanvas.toDataURL(\"image/png\");
// Set date for localStorage
storageFiles.date = todaysDate;
// Save as JSON in localStorage
try {
localStorage.setItem(\"storageFiles\",JSON.stringify(storageFiles));
}
catch (e) {
console.log(\"Storage failed: \" + e);
}
},false);
// Set initial image src
elephant.setAttribute(\"src\",\"elephant.png\");
}
else {
// Use image from localStorage
elephant.setAttribute(\"src\",storageFiles.elephant);
}
// Getting a file through XMLHttpRequest as an arraybuffer and creating a Blob
var rhinoStorage = localStorage.getItem(\"rhino\"),rhino = document.getElementById(\"rhino\");
if (rhinoStorage) {
// Reuse existing Data URL from localStorage
rhino.setAttribute(\"src\",rhinoStorage);
}
else {
// Create XHR,BlobBuilder and FileReader objects
var xhr = new XMLHttpRequest(),blob,fileReader = new FileReader();
xhr.open(\"GET\",\"rhino.png\",true);
// Set the responseType to arraybuffer. \"blob\" is an option too,rendering BlobBuilder unnecessary,but the support for \"blob\" is not widespread enough yet
xhr.responseType = \"arraybuffer\";
xhr.addEventListener(\"load\",function () {
if (xhr.status === 200) {
// Create a blob from the response
blob = new Blob([xhr.response],{type: \"image/png\"});
// onload needed since Google Chrome doesn\'t support addEventListener for FileReader
fileReader.onload = function (evt) {
// Read out file contents as a Data URL
var result = evt.target.result;
// Set image src to Data URL
rhino.setAttribute(\"src\",result);
// Store Data URL in localStorage
try {
localStorage.setItem(\"rhino\",result);
}
catch (e) {
console.log(\"Storage failed: \" + e);
}
};
// Load blob as Data URL
fileReader.readAsDataURL(blob);
}
},false);
// Send XHR
xhr.send();
}
})();
资源