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

Question

我正在使用 Routify 在 Svelte 中編寫 PWA，並嘗試將筆記（包含 id、標題和正文）保存在本地 json 文件中。

我一直在關注 Svelte REPL（ Svelte POST 示例）中的這段代碼，但他們使用了一個 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時是否可以使用相對路徑？ 還是我應該使用其他東西？

Answer 1

通常，您不會在其他任何地方 POST 數據，而是將數據發送到服務器。 話雖如此，如果您絕對想使用 POST 保存數據，您可以向您的應用程序添加一個 serviceworker 來攔截fetch()請求，然后將數據保存在緩存、indexeddb、localstorage 或類似的東西中。 但是讓 serviceworker 介於兩者之間有點愚蠢，您應該將數據直接存儲在緩存、indexeddb 或 localstorage 中。

本地存儲示例：

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

但請注意，無論您使用哪種存儲方式，如果用戶決定清除瀏覽器數據或瀏覽器由於存儲空間不足而自行清理，它們都可能會被清除。