将本地文件“上传”到localStorage(无需服务器交互)[重复]

问题描述 投票:1回答:1

这个问题在这里已有答案:

我正要问'如何'下载“localStorage?”但幸运的是找到this和我原来的问题解决了。

现在,我如何允许用户将本地文件“上传”到localStorage或javascript?我不是要求在后台访问本地文件的方式,这是明确禁止的;我希望用户明确选择他们的本地文件。

例如,如果用户有save.json

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

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

javascript local-storage
1个回答
2
投票

以下是用户上载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>
© www.soinside.com 2019 - 2024. All rights reserved.