这个问题在这里已有答案:
我正要问'如何'下载“localStorage?”但幸运的是找到this和我原来的问题解决了。
现在,我如何允许用户将本地文件“上传”到localStorage或javascript?我不是要求在后台访问本地文件的方式,这是明确禁止的;我希望用户明确选择他们的本地文件。
例如,如果用户有save.json
:
{
"hp": 32,
"maxHp": 50,
"mp": 11,
"maxMp": 23
}
如何通过要求用户上传此文件将其设置为localStorage?
以下是用户上载save.json文件的示例。您可以在浏览器中打开它并上传您自己的save.json文件。刷新页面并检查控制台以查看打印出的已保存的json。我已经包含了一个fiddle,但在JSFiddle中使用localStorage存在问题。
<html>
<input type="file" name="files[]" id="fileUpload">
<script type="text/javascript">
(function() {
// Key for local storage, use to save and access.
var FILE_KEY = 'save.json';
// fire processUpload when the user uploads a file.
document.querySelector('#fileUpload').addEventListener('change', handleFileUpload, false);
// Log any previously saved file.
console.log('previous save: ', retrieveSave());
// Setup file reading
var reader = new FileReader();
reader.onload = handleFileRead;
function handleFileUpload(event) {
var file = event.target.files[0];
reader.readAsText(file); // fires onload when done.
}
function handleFileRead(event) {
var save = JSON.parse(event.target.result);
console.log(save) // {hp: 32, maxHp: 50, mp: 11, maxMp: 23}
window.localStorage.setItem(FILE_KEY, JSON.stringify(save));
}
function retrieveSave() {
return JSON.parse(localStorage.getItem(FILE_KEY))
}
})();
</script>
</html>