docs: update state-management.mdx (#916)

* docs: update state-management.mdx * docs(core): update state-management.mdx from comments --------- Co-authored-by: Ryan Carniato <[email protected]>
solidjs · Jun 28, 2023 · 6a0c64f · 6a0c64f
1 parent 34ce0fd
commit 6a0c64f
Showing 1 changed file with 94 additions and 9 deletions.
diff --git a/docs/core-concepts/state-management.mdx b/docs/core-concepts/state-management.mdx
@@ -4,12 +4,97 @@ title: State Management
 order: 100
 ---
 
-# State management
-
-- Where to store different types of information
-  - Client-side states/stores
-  - local/session storage
-  - query params
-  - Cookies, session cookies
-  - Databases
-  - Caution about global state on the server
+There are many different ways to store and manage state in a Solid Start app. In this section we will discuss some of the most common ways to manage state in a project.
+
+## What is state?
+
+State is any information that is stored in your application. This can be anything from the current user's name to the current page the user is on. State can be stored in many different places, and can be accessed in many different ways.
+
+## Client-side state
+
+Client-side state is any state that is stored on the client's browser (and therefore, not available on the server). This can be stored in a variety of ways, including:
+
+- Local storage
+- Session storage
+- Cookies
+- Query parameters
+- Client-side stores
+
+### Local storage
+
+Local storage is a way to store data in the browser. This data is stored in the browser's local storage, and can be accessed by any page on the same domain. This data is persistent, and will remain even if the user closes their browser.
+
+When you need to access the `localStorage` API, you can either use a `createEffect` hook or a `createRouteAction` which gaurantees that the code will run in the browser.
+
+```tsx twoslash {19-21} filename="components/ThemePicker.tsx"
+// @include: lib
+// ---cut---
+import { createEffect, createSignal } from 'solid-start';
+
+const LIGHT = 'light';
+const DARK = 'dark';
+
+export function ButtonThemeCacher() {
+  const [theme, setTheme] = createSignal(LIGHT);
+
+  function handleClick() {
+    setTheme(theme() === LIGHT ? DARK : LIGHT);
+  }
+
+  createEffect(() => {
+    localStorage.setItem('theme', theme());
+  });
+
+  return (
+    <button onClick={handleClick} type="button">
+      Toggle theme
+    </button>
+  );
+}
+```
+
+### Session storage
+
+TBD... [createSessionStorage](../api/createSessionStorage.md) hook.
+
+### Cookies
+
+TBD... [createCookieSessionStorage](../api/createCookieSessionStorage.md) hook.
+
+### Query parameters
+
+TBD...
+
+### Client-side stores
+
+TBD...normal Solid API stuff
+
+- createStore
+- Context
+- createSignal
+
+## Server-side state
+
+Server-side state is any state that is stored on the server. This can be stored in a variety of ways, including:
+
+- Databases
+- Session cookies
+- Server-side stores
+
+### Databases
+
+TBD...
+
+### Session cookies
+
+TBD... [createSessionStorage](../api/createSessionStorage.md) hook.
+
+### Server-side stores
+
+TBD...
+
+### Global state and the server
+
+While it is possible to use global state and computations, Context is sometimes a better solution. Additionally, it is important to note that global state should not be used in SSR (server side rendering) solutions, such as Solid Start.
+
+On the server, global state is shared across requests, and the lack of data isolation can (and will) lead to bugs, memory leaks and has security implications. It is recommended that application state should always be provided via `Context` instead of relying on global.