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()
};
}
我正在学习 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()
};
}