Sveltekit Todos 示例...数据存储在哪里?

Sveltekit Todos Example... Where is the data being stored?

我正在学习 SvelteKit works. There is a pretty nice "hello world PLUS" place to start with the "create-svelte" example. In that example there is a "todos" page. Source files here. 这是一个简单的页面,您可以在其中添加和删除内容以执行任务。我正在尝试弄清楚各个任务是如何管理的。

我可以在客户端的 Javascript 中看到创建 todos 数组的位置;我可以通过 index.svelte 文件中的 console.logs 来验证。我可以通过 Chrome Inspect(开发工具,网络选项卡)看到创建任务会生成 todos.json 网络 Post 请求 http://localhost:3000/todos.json get/post 请求returns原内容返回给客户端

我没有看到数据在浏览器上的存储位置。我完全期待在本地存储、会话存储、cookies 甚至 indexeddb 中看到一些东西。

我没有看到内容的存储位置。如果我关闭浏览器选项卡并重新打开,数据就在那里。如果我在同一台本地计算机上打开不同的浏览器,则不存在任务数据。如果我“清空缓存并重新加载”任务数据仍然存在。

经过一些测试,我可以看到一个 cookie。 Name: userid Value: d38b9b44-1a8b-414e-9a85-1c2b2c0700f4 Domain: localhost Path: / Expires/MaxAge: Session Size: 42 HttpOnly: ✓ Priority: Medium

如果我以任何方式修改或删除此 cookie,那么存储的任务数据就会消失。

那么todos任务数据暂时存放在哪里呢?我没看到什么?

我多次阅读此文件 _api.js 的 header。我在浏览器中测试了“https://api.svelte.dev”并返回了空响应。我只是假设这是一个死服务器。

事实证明,svelte 的人员确实提供了一个功能齐全的 api 服务器,可以接收、删除和存储待办事项数据。在 api 函数中查看我的测试笔记。

浏览器请求 https://api.svelte.dev/todos/d38b9b44-1a8b-414e-9a85-1c2b2c0700f4 绝对 returns 我的任务数据,现在我可以看到这些东西是如何工作的。此处提供的信息以防其他人想知道这里发生了什么。

这是完整的 _api.js 文件

/*
This module is used by the /todos.json and /todos/[uid].json
endpoints to make calls to api.svelte.dev, which stores todos
for each user. The leading underscore indicates that this is
a private module, _not_ an endpoint — visiting /todos/_api
will net you a 404 response.

(The data on the todo app will expire periodically; no
guarantees are made. Don't use it to organise your life.)
*/

const base = 'https://api.svelte.dev';


export async function api(request, resource, data) {
    console.log("resource: ", resource);
    // returns--> resource:  todos/d38b9b44-1a8b-414e-9a85-1c2b2c0700f4
    //https://api.svelte.dev/todos/d38b9b44-1a8b-414e-9a85-1c2b2c0700f4    <--- test this !!
    // user must have a cookie set
    if (!request.locals.userid) {
        return { status: 401 };
    }

const res = await fetch(`${base}/${resource}`, {
    method: request.method,
    headers: {
        'content-type': 'application/json'
    },
    body: data && JSON.stringify(data)
});

// if the request came from a <form> submission, the browser's default
// behaviour is to show the URL corresponding to the form's "action"
// attribute. in those cases, we want to redirect them back to the
// /todos page, rather than showing the response
if (res.ok && request.method !== 'GET' && request.headers.accept !== 'application/json') {
    return {
        status: 303,
        headers: {
            location: '/todos'
        }
    };
}

return {
    status: res.status,
    body: await res.json()
};

}