Sveltekit Todos 示例... 数据存储在哪里？答案

【问题标题】：Sveltekit Todos Example... Where is the data being stored?Sveltekit Todos 示例... 数据存储在哪里？
【发布时间】：2021-10-26 20:47:51
【问题描述】：

我正在学习SvelteKit 的工作原理。有一个很好的“hello world PLUS”从“create-svelte”示例开始。在该示例中，有一个“待办事项”页面。 Source files here. 这是一个简单的页面，您可以在其中添加删除事物来执行任务。我正在尝试弄清楚各个任务是如何管理的。

我可以看到在客户端的 Javascript 中创建了一个 todos 数组的位置；我可以通过 index.svelte 文件中的 console.logs 验证这一点。我可以通过 Chrome Inspect（开发工具、网络选项卡）看到其中任务的创建会生成一个 todos.json 网络 Post 请求 http://localhost:3000/todos.json get/post 请求只是将原始内容返回给客户端。

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

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

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

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

那么 todos 任务数据临时存储在哪里呢？我没看到什么？

【问题讨论】：

标签： javascript api svelte svelte-component sveltekit

【解决方案1】：

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

事实证明，svelte 的人确实提供了一个功能齐全的 api 服务器，既可以接收、删除和存储 todo 任务数据。请参阅我在 api 函数中的测试说明。

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

这是完整的 _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()
};

}

【讨论】：