企业官网建设流程全解析

河南网站优化外包服务,做网站做网站,高端自适应网站建设,山东平台网站建设平台一、为什么需要 JS 客户端存储#xff1f;HTTP 协议的无状态特性导致浏览器与服务器每次通信都无法保留上下文#xff0c;而客户端存储正是解决这一痛点的关键#xff1a;状态保持#xff1a;记住用户登录状态、购物车数据、表单填写进度性能优化#xff1a;缓存接口数据、…一、为什么需要 JS 客户端存储HTTP 协议的无状态特性导致浏览器与服务器每次通信都无法保留上下文而客户端存储正是解决这一痛点的关键状态保持记住用户登录状态、购物车数据、表单填写进度性能优化缓存接口数据、静态资源减少网络请求尤其弱网场景离线能力支持 PWA 离线访问、本地文档编辑等场景个性化体验存储用户偏好主题、字体大小、浏览历史核心需求本质是在浏览器端安全、高效地存储不同生命周期、不同容量级别的数据。二、JS 客户端存储全景图JS 客户端存储主要分为 5 大类覆盖从 1KB 到 GB 级的存储需求适用场景各有侧重存储方案容量限制生命周期同源策略访问权限核心特性Cookie4KB可配置Expires/Max-Age是前后端均可访问随 HTTP 请求自动携带支持跨域配置localStorage5-10MB永久手动清除是仅前端访问同步操作字符串键值对sessionStorage5-10MB会话级标签页关闭失效是仅前端访问同标签页共享刷新不丢失IndexedDB无明确限制取决于磁盘永久是仅前端访问异步操作支持结构化数据、事务Cache API无明确限制永久手动清除是仅前端访问专门缓存 HTTP 请求 / 响应三、逐个击破每种存储方案的实战指南1. Cookie前后端共享的 “轻量存储”核心原理Cookie 是服务器发送给浏览器的小型文本数据浏览器会在后续请求中自动携带通过Cookie请求头常用于身份验证、会话跟踪。关键 API 与配置// 设置Cookie核心参数键、值、过期时间、域名、路径、安全属性function setCookie(key, value, options {}) {let cookieStr ${encodeURIComponent(key)}${encodeURIComponent(value)};// 过期时间Expires日期字符串或 Max-Age秒数if (options.expireDays) {const date new Date();date.setTime(date.getTime() options.expireDays * 24 * 60 * 60 * 1000);cookieStr ; Expires${date.toUTCString()};}// 核心安全属性必设cookieStr ; Path${options.path || /}; // 生效路径cookieStr options.domain ? ; Domain${options.domain} : ;cookieStr options.secure ? ; Secure : ; // 仅HTTPS传输cookieStr ; SameSiteLax; // 防御CSRF攻击cookieStr options.httpOnly ? ; HttpOnly : ; // 禁止JS访问防XSSdocument.cookie cookieStr;}// 读取Cookiefunction getCookie(key) {const cookies document.cookie.split(; );for (const cookie of cookies) {const [k, v] cookie.split();if (decodeURIComponent(k) key) {return decodeURIComponent(v);}}return null;}// 删除Cookie设置过期时间为过去function removeCookie(key) {setCookie(key, , { expireDays: -1 });}适用场景与坑点✅ 适用身份令牌JWT、会话 ID、记住登录状态7 天免登录❌ 不适用大量数据4KB 限制、敏感数据即使有 HttpOnly仍可能被 CSRF 利用⚠️ 坑点每次 HTTP 请求都会携带所有 Cookie增加带宽消耗建议核心 Cookie 仅保留 1-2 个跨域请求默认不携带 Cookie需配置withCredentials: true前端 Access-Control-Allow-Credentials: true后端2. Web Storage前端专属的 “键值对存储”localStorage和sessionStorage统称 Web StorageAPI 完全一致核心差异在生命周期和共享范围。核心 API通用// 存储数据自动转为字符串复杂数据需序列化localStorage.setItem(username, zhangsan);localStorage.setItem(userInfo, JSON.stringify({ id: 1, age: 20 }));// 读取数据const username localStorage.getItem(username);const userInfo JSON.parse(localStorage.getItem(userInfo));// 删除数据localStorage.removeItem(username);localStorage.clear(); // 清空所有// 遍历数据for (let i 0; i ) {const key localStorage.key(i);console.log(key, localStorage.getItem(key));}两者核心差异特性localStoragesessionStorage生命周期永久除非手动清除标签页关闭后失效共享范围同源所有标签页仅当前标签页跨窗口通信支持storage 事件不支持进阶封装带过期时间的 Web Storage原生 Web Storage 不支持过期时间封装工具类解决这一痛点class StorageUtil {constructor(storage localStorage) {this.storage storage;}// 存储数据expire过期时间单位秒0表示永久set(key, value, expire 0) {const data {value,expire: expire ? Date.now() expire * 1000 : 0,timestamp: Date.now()};this.storage.setItem(key, JSON.stringify(data));}// 读取数据自动清理过期数据get(key) {const json this.storage.getItem(key);if (!json) return null;try {const data JSON.parse(json);// 检查过期if (data.expire data.expire {this.remove(key);return null;}return data.value;} catch (e) {this.remove(key); // 数据格式错误时清理return null;}}remove(key) {this.storage.removeItem(key);}clear() {this.storage.clear();}// 监听storage变化仅localStorage有效onStorageChange(callback) {window.addEventListener(storage, (e) {callback({key: e.key,oldValue: e.oldValue ? JSON.parse(e.oldValue)?.value : null,newValue: e.newValue ? JSON.parse(e.newValue)?.value : null,storageArea: e.storageArea});});}}// 实例化const localStore new StorageUtil(localStorage);const sessionStore new StorageUtil(sessionStorage);// 使用示例localStore.set(token, xxx, 86400); // 24小时过期console.log(localStore.get(token));适用场景与坑点✅ 适用localStorage用户偏好设置、表单缓存、非敏感接口数据缓存sessionStorage临时表单数据、页面间临时传值同标签页❌ 不适用大量数据5-10MB 限制敏感数据易被 XSS 攻击窃取跨标签页实时通信sessionStorage 不支持localStorage 需监听 storage 事件⚠️ 坑点同步操作批量读写会阻塞主线程建议单次存储不超过 100KB字符串序列化存储undefined会转为undefined存储循环引用对象会报错同源限制