“上传”本地文件到localStorage（没有服务器交互）[重复]答案

【问题标题】："Upload" local file to localStorage (without server-interaction) [duplicate]“上传”本地文件到localStorage（没有服务器交互）[重复]
【发布时间】：2018-08-11 17:46:06
【问题描述】：

我正要问“如何“下载”localStorage？不过幸运的是找到了this，我原来的问题也解决了。

那么，我怎样才能允许用户将本地文件“上传”到 localStorage 或一般的 javascript？我不是在询问在后台访问本地文件的方式，这显然是被禁止的；我希望用户明确选择他们的本地文件。

例如，如果用户有save.json：

{
    "hp": 32,
    "maxHp": 50,
    "mp": 11,
    "maxMp": 23
}

如何通过仅要求用户上传此文件来将其设置为 localStorage？

【问题讨论】：

这里已经回答了这个问题：stackoverflow.com/questions/16505333/…

标签： javascript local-storage

【解决方案1】：

以下是用户上传 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>

【讨论】：

这不是一个老问题，也是一个老答案，它完全符合我要问的问题。