Question

我正要问＆＃39;如何＆＃34;下载＆＃34; localStorage的＆＃39？;但幸运的是找到了this，我原来的问题得到了解决。

现在，我如何允许用户上传＆＃34;本地文件到localStorage或javascript一般？我并没有要求在背景中访问本地文件的方式是明确禁止的;我希望用户明确选择他们的本地文件。

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

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

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

Answer 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>

＆＃34;上传＆＃34;本地文件到localStorage（没有服务器交互）

1 个答案: