Simple Session Storage Management for Svlelte.
Sessions are an important part of websites that allow the server to identify requests coming from the same person, especially when it comes to server-side form validation or when JavaScript is not on the page. Sessions are a fundamental building block of many sites that let users "log in", including social, e-commerce, business, and educational websites.
Svelte-Session comes with several pre-built session storage options for common scenarios, and one to create your own:
- custom storage with
createCustomStrategy CookieSessionStrategyMemoryStrategyCloudflareKVStrategy(Cloudflare Workers)
To use it, install it from npm (yarn or bun):
npm install @svelte-dev/session
Init from hooks.server.ts:
import { handleSession } from '@svelte-dev/session'; export const handle = handleSession({ adapter: { name: 'cookie', options: { chunk: true } }, session: { key: '__sid', secrets: ['s3cr3t'] }, cookie: { path: '/', sameSite: 'lax', secure: true, httpOnly: true } });
Load Data from +page.server.ts:
import type { ServerLoad } from '@sveltejs/kit'; export const load: ServerLoad = async ({ locals }) => { const views = locals.session.get('views') ?? 0; await locals.session.set('views', views + 1); return {}; };
Use in svelte5 runes component:
<script> let { data } = $props(); </script> <pre> {JSON.stringify(data, null, 2)} </pre>
See: https://svelte-session.js.cool/ For more details
Init from hooks.server.ts:
import { handleSession } from '@svelte-dev/session'; export const handle = handleSession({ adapter: { name: 'cloudflare-kv', options: { namespace: 'SESSION' } }, session: { secrets: ['s3cr3t'] }, cookie: { path: '/' } });
Checkout the docs for more details: https://kit.svelte.dev/docs/adapter-cloudflare#bindings
export const handle = handleSession({ adapter: { name: 'cookie', options: { chunk: true } }, session: { key: '__sid', secrets: ['s3cr3t'] }, cookie: { path: '/', sameSite: 'lax', secure: true, httpOnly: true }, ({ event, resolve }) => { // event.locals is populated with the session `event.locals.session` // Do anything you want here return resolve(event); } );
In case you're using sequence(), do this
const sessionHandler = handleSession({ adapter: { name: 'cookie', options: { chunk: true } } }); export const handle = sequence(sessionHandler, ({ resolve, event }) => { // event.locals is populated with the session `event.locals.session` // event.locals is also populated with all parsed cookies by handleSession, it would cause overhead to parse them again - `event.locals.cookies`. // Do anything you want here return resolve(event); });
Here's a simple example, modify app.d.ts:
import type { FlashSessionData, SessionData, SessionStorage } from '@svelte-dev/session'; declare global { namespace App { // interface Error {} interface Locals { session: SessionStorage<{ views: number }>; } interface PageData { session: FlashSessionData<SessionData, SessionData>; } interface Session extends SessionStorage {} // interface Platform {} } }
import type { RequestEvent } from '@sveltejs/kit'; import type { CookieOptions, FlashSessionData, SessionData, SessionOptions, SessionStorageStrategy } from '@svelte-dev/session'; export type YourStrageOptions = { /** * Example */ key?: string; }; export class YourStrategy<Data = SessionData, FlashData = Data> implements SessionStorageStrategy<Data, FlashData> { constructor( event: RequestEvent, options: YourStrageOptions & { cookie: CookieOptions; session: SessionOptions } ) {} /** * Creates a new record with the given data and returns the session id. */ async createData(data, expires?: Date): Promise<string> {} /** * Returns data for a given session id, or `null` if there isn't any. */ async readData(id: string): Promise<FlashSessionData<Data, FlashData> | null> {} /** * Updates data for the given session id. */ async updateData( id: string, data: FlashSessionData<Data, FlashData>, expires?: Date ): Promise<void> {} /** * Deletes data for a given session id from the data store. */ async deleteData(id: string): Promise<void> {} }
维护者 Owner： Willin Wang
如果您对本项目感兴趣，可以通过以下方式支持我：
Donation ways:
- Github: https://github.com/sponsors/willin
- Paypal: https://paypal.me/willinwang
- Alipay or Wechat Pay: QRCode
Apache-2.0