“上传”本地文件到localStorage（无服务器交互）

Question

“上传”本地文件到localStorage（无服务器交互）

我正要问“如何“下载”localStorage？但幸运的是找到了这个，我原来的问题就解决了。

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

Wil*_*ing 6

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，7 月前
查看次数：	7649 次
最近记录：	7 年，7 月前