工艺品东莞网站建设自己做游戏需要学什么

工艺品东莞网站建设,自己做游戏需要学什么,运营 网站,做网站需要基础吗一文了解 Cookie、localStorage、sessionStorage的区别与实战案例 在前端开发中#xff0c;浏览器存储是不可或缺的核心能力#xff0c;无论是保存用户登录状态、记住主题偏好#xff0c;还是暂存表单中间数据#xff0c;都离不开它。而Cookie、localStorage、sessionStora…一文了解 Cookie、localStorage、sessionStorage的区别与实战案例在前端开发中浏览器存储是不可或缺的核心能力无论是保存用户登录状态、记住主题偏好还是暂存表单中间数据都离不开它。而Cookie、localStorage、sessionStorage作为最常用的三种浏览器存储方案很多开发者在实际项目中容易混淆它们的使用场景。本文将从核心特性出发清晰对比三者的区别再结合Vue框架给出可直接复用的实战代码案例帮你彻底搞懂何时用哪种存储方案。一、核心区别对比一张表看懂先通过一张对比表快速掌握三者的核心差异知识点特性CookielocalStoragesessionStorage存储容量约 4KB容量较小适合存储少量数据约 5MB容量较大可存储更多本地数据约 5MB容量较大生命周期可手动设置过期时间默认随会话结束关闭浏览器清除永久存储除非手动清除清除浏览器缓存、代码删除会话级存储关闭当前标签页即清除同一浏览器不同标签页不共享作用域同源协议、域名、端口一致下共享且自动随每次HTTP请求发送到服务器同源下共享仅通过JS访问不主动发送给服务器同源且同标签页下共享不同标签页即使同源也不共享是否自动发送给服务器是每次请求都会携带可能增加请求体积否否访问方式JS和服务器均可访问仅JS可访问仅JS可访问典型用途会话管理、身份验证如登录Token、记住密码长期保存用户偏好如暗黑模式、本地缓存不敏感数据暂存单次会话数据如多步骤表单中间值、页面临时状态二、Vue实战案例可直接复用在Vue项目中不同存储方案的使用方式略有差异下面结合实际业务场景给出完整的代码示例。1. Cookie适合存储登录状态等需要和服务器交互的数据Cookie原生API使用起来不够便捷推荐使用js-cookie库轻量、易用专门用于管理Cookie。步骤1安装依赖npm install js-cookie --save步骤2实战代码登录状态管理场景用户登录后保存Token退出登录时删除Token页面刷新后保留登录状态。template div classlogin-container h2用户登录/h2 input typetext v-modelusername placeholder请输入用户名 classinput input typepassword v-modelpassword placeholder请输入密码 classinput button clickhandleLogin classbtn登录/button button clickhandleLogout classbtn btn-logout退出登录/button p v-iftoken classlogin-status当前登录状态已登录Token{{ token }}/p p v-else classlogin-status当前登录状态未登录/p /div /template script // 引入js-cookie库 import Cookies from js-cookie; export default { name: LoginPage, data() { return { username: , password: , // 初始化时从Cookie获取Token无则为空 token: Cookies.get(userToken) || }; }, methods: { handleLogin() { // 模拟接口请求登录实际项目中替换为真实接口 if (this.username this.password) { const mockToken mock_user_token_123456; // 接口返回的Token // 设置Cookiekey为userToken值为mockToken过期时间1天 Cookies.set(userToken, mockToken, { expires: 1 }); // 更新本地Token状态 this.token mockToken; alert(登录成功); } else { alert(请输入用户名和密码); } }, handleLogout() { // 删除Cookie Cookies.remove(userToken); // 重置状态 this.token ; this.username ; this.password ; alert(退出登录成功); } } }; /script核心说明设置Cookie时expires: 1表示1天后过期也可设置为具体日期如new Date(2025-12-31)删除Cookie时需确保Cookies.remove()的key与设置时一致适合存储需要和服务器交互的身份信息因为Cookie会自动随请求发送。2. localStorage适合长期保存用户偏好数据localStorage原生API已足够简洁无需额外安装依赖适合存储长期不失效的本地数据。实战代码主题切换功能场景用户切换暗黑/亮色主题后刷新页面依然保留当前主题设置。template div classtheme-container :classtheme h2主题切换演示/h2 p当前主题{{ theme light ? 亮色模式 : 暗黑模式 }}/p button clicktoggleTheme classtheme-btn切换主题/button /div /template script export default { name: ThemeSwitch, data() { return { // 初始化时从localStorage获取主题无则默认亮色模式 theme: localStorage.getItem(appTheme) || light }; }, methods: { toggleTheme() { // 切换主题状态 this.theme this.theme light ? dark : light; // 保存主题到localStorage永久有效除非手动清除 localStorage.setItem(appTheme, this.theme); } } }; /script核心说明使用localStorage.setItem(key, value)存储数据localStorage.getItem(key)获取数据数据永久保存即使关闭浏览器再重新打开依然能获取到适合存储用户偏好、本地缓存数据等不需要和服务器交互的长期数据。3. sessionStorage适合暂存会话级临时数据sessionStorage的API和localStorage完全一致但生命周期是会话级关闭标签页后数据即丢失。实战代码多步骤表单暂存场景多步骤表单如注册表单用户填写完第一步内容后切换页面再返回依然保留已填写的内容关闭标签页后丢失。template div classform-container h2多步骤注册表单步骤1/h2 input typetext v-modelformData.username placeholder请输入用户名 classinput input typetel v-modelformData.phone placeholder请输入手机号 classinput button clickgoToNextStep classform-btn下一步暂存数据/button p classtip提示关闭当前标签页后已填写内容将丢失/p /div /template script export default { name: MultiStepForm, data() { return { // 初始化时从sessionStorage获取暂存的表单数据无则为空对象 formData: JSON.parse(sessionStorage.getItem(step1Form)) || { username: , phone: } }; }, watch: { // 监听formData变化实时暂存到sessionStorage formData: { deep: true, // 深度监听对象内部属性变化 handler(newVal) { // sessionStorage只能存储字符串需将对象转为JSON字符串 sessionStorage.setItem(step1Form, JSON.stringify(newVal)); } } }, methods: { goToNextStep() { if (this.formData.username this.formData.phone) { // 模拟跳转到下一步表单实际项目中用路由跳转 alert(已暂存步骤1数据跳转到步骤2); // 此处可添加路由跳转代码如this.$router.push(/register-step2) } else { alert(请填写完整用户名和手机号); } } } }; /script核心说明API和localStorage一致但数据仅在当前标签页有效关闭标签页或打开新标签页均无法获取存储对象时需用JSON.stringify()转为字符串获取时用JSON.parse()转回对象适合暂存单次会话的临时数据如多步骤表单、页面临时状态等无需长期保留的数据。三、总结如何选择合适的存储方案最后用一张表快速梳理三种方案的Vue使用场景和核心要点方便实际开发中快速决策存储方式Vue中典型使用场景核心要点Cookie登录状态管理、身份验证Token、记住密码用js-cookie库简化操作可设置过期时间自动随请求发送localStorage用户主题偏好、本地缓存数据、长期保存的不敏感信息原生API简洁永久存储需手动清除不发送给服务器sessionStorage多步骤表单暂存、页面临时状态、单次会话数据API同localStorage会话级生命周期关闭标签页即清除