偏好值需服务端可读、客户端可改、刷新不丢：用usecookie创建响应式ref，ssr时直接读取并渲染，前端修改自动同步cookie，设httponly=false、secure=true、samesite=lax确保安全可用。
明确目标：偏好值要“服务端可读、客户端可改、刷新不丢”
用户设置每页显示10条还是20条，这类偏好必须在首次服务端渲染时就生效——否则页面会先闪现默认值（比如20条），再由前端js重绘成用户想要的10条，体验割裂。ssr场景下，关键不是“能不能存”，而是“服务端能否在html生成前就读到它”，并据此渲染正确内容。
核心实现：用 useCookie 创建响应式偏好引用
在支持SSR的框架（如Nuxt或Vue 3 + Vite SSR）中，useCookie 是专为该场景设计的工具：
- 它返回一个响应式 ref，值自动同步到 Cookie，且在服务端和浏览器中都可用
- 值默认序列化为 JSON，能安全存储数字、布尔、对象等结构化数据
- 无需手动解析/字符串拼接，避免类型错误或 XSS 风险
示例代码（Vue 3 setup script）：
<script setup><br> const itemsPerPage = useCookie('items_per_page', {<br> default: () => 10,<br> maxAge: 60 * 60 * 24 * 30 // 30天<br> })<br> // 若 Cookie 为空，则设为默认值<br> itemsPerPage.value = itemsPerPage.value ?? 10<br> </script>
服务端渲染时直接使用偏好值
在 async setup() 或 server-fetch 阶段，你可以直接读取 itemsPerPage.value 并传给接口请求：
- Nuxt 中可在
useAsyncData的参数里直接引用：page: 1, limit: itemsPerPage.value - Vue SSR 中可在
onServerPrefetch钩子内调用 API，确保 HTML 输出即含正确分页数据 - 这样首屏渲染出的列表就是用户习惯的条数，无闪烁、无二次加载
前端交互更新偏好并即时生效
用户点击“每页20条”按钮时，只需修改 ref 值，Cookie 自动更新，后续请求也立即带上新值：
- 无需调用额外 setCookie 函数，响应式机制已封装底层逻辑
- 若搭配
watch监听，还可触发局部刷新（如仅重载表格区域），而非整页跳转 - 关闭浏览器再打开，偏好依然存在——因为 maxAge 已设为30天
安全与兼容性提醒
对用户偏好类 Cookie，建议固定启用以下选项：
- httpOnly: false —— 必须设为 false，否则前端无法读写
- secure: true —— 生产环境强制 HTTPS 传输
- sameSite: 'lax' —— 防止跨站伪造请求，同时允许导航时携带
- 避免存敏感信息（如密码、token），偏好值本身无风险，但命名别暴露业务逻辑（例如不用
admin_view_mode）
