POST 到没有服务器的本地 json 文件，使用 Svelte 和 Routiify

如何解决POST 到没有服务器的本地 json 文件，使用 Svelte 和 Routiify

我正在使用 Routify 在 svelte 中编写 PWA，并尝试将笔记（包含 id、标题和正文）保存在本地 json 文件中。

我一直在关注 svelte REPL (Svelte POST example) 中的这段代码，但他们使用了一个 Web URL。尝试使用直接链接时，我得到 404，即使路径是正确的。

<script>
    let foo = 'title'
    let bar = 'body'
    let result = null
    
    async function doPost () {
        const res = await fetch('https://httpbin.org/post',{
            method: 'POST',body: JSON.stringify({
                foo,bar
            })
        })
        
        const json = await res.json()
        result = JSON.stringify(json)
    }
</script>


<input bind:value={foo} />
<input bind:value={bar} />
<button type="button" on:click={doPost}>
    <p>Post it.</p>
</button>
<p>Result:</p>
<pre>
{result}
</pre>

我安装了一个 json 服务器插件，它有点工作，但我想将数据存储为本地文件。

是否可以在不使用任何服务器的情况下使用 POST 写入本地 json 文件？使用 fetch 时是否可以使用相对路径？还是我应该使用其他东西？

解决方法

通常，您不会将数据发布到服务器以外的任何其他地方。话虽如此，如果您绝对想使用 POST 保存数据，您可以向您的应用程序添加一个 serviceworker 来拦截 fetch() 请求，然后将数据保存在缓存、indexeddb、localstorage 或类似的东西中。但是让那个 serviceworker 介于两者之间有点愚蠢，您应该将数据直接存储在缓存、indexeddb 或 localstorage 中。

本地存储示例：

const data = { someKey: { someOtherKey: 'some value' } };
localStorage.setItem('myData',JSON.stringify(data));

但请注意，无论您使用哪种存储方式，如果用户决定清除浏览器数据或浏览器由于存储空间不足而自行清理，它们都可能会被清除。