js中session缓存数据

博客介绍了将登录页面中的用户名称显示在主页面上方的方法,包括在登录页面的js里进行登录成功后的操作,以及主页面接收用户名的相关内容,属于前端开发范畴。

举例:将登录页面中的用户名称,显示在主页面上方

1、登录页面js,在登录成功后操作

//登录成功
sessionStorage.setItem("name", $("#username").val());
window.location.href="index.html";

2、主页面接收

var name= sessionStorage.getItem("name");
### Vue3 中实现 Session 缓存 为了在 Vue3 应用程序中有效地管理会话存储 (session storage),可以利用 `storage.ts` 文件来封装常见的操作方法。这不仅提高了代码的可维护性和重用率,还简化了不同组件之间的数据共享逻辑。 #### 封装 Storage 工具类 创建一个名为 `storage.ts` 的工具模块用于处理本地存储和会话存储的操作: ```typescript // utils/storage.ts export class Session { /** * 设置会话中的键值对 */ static setItem(key: string, value: any): void { window.sessionStorage.setItem(key, JSON.stringify(value)); } /** * 获取指定键对应的会话值 */ static getItem<T>(key: string): T | null { const item = sessionStorage.getItem(key); return item ? JSON.parse(item) as T : null; } /** * 移除特定项 */ static removeItem(key: string): void { sessionStorage.removeItem(key); } } ``` 此段代码定义了一个静态类 `Session` 来提供简单的 CRUD 方法以便于访问浏览器内置的 `sessionStorage` API[^2]。 #### 使用 Session 存储功能 在任何 Vue 组件内部引入上述封装好的 `Session` 类,并调用相应的方法来进行数据读写操作: ```javascript import { defineComponent } from 'vue'; import { Session } from '/@/utils/storage'; export default defineComponent({ name: "ExampleComponent", setup() { // 如果不存在则初始化 token 值 if (!Session.getItem<string>('token')) { Session.setItem('token', 'example-token-value'); } console.log(Session.getItem<string>('token')); return {}; }, }); ``` 这段示例展示了如何检查是否存在某个 key 并在其缺失的情况下设置默认值;同时也演示了获取已保存的数据的方式。 对于更复杂的应用场景,比如用户登录状态保持、表单自动填充等功能来说,合理运用 session cache 可以为用户提供更好的体验,同时减少不必要的服务器请求次数。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值