欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 时评 > 浏览器本地存储和token封装和浏览器导航栏title的笔记

浏览器本地存储和token封装和浏览器导航栏title的笔记

2025/2/24 18:57:12 来源:https://blog.csdn.net/qq_65965798/article/details/143360571  浏览:    关键词:浏览器本地存储和token封装和浏览器导航栏title的笔记

1、本地存储

LocalStorage 是一种 web 存储机制,允许网页在用户的浏览器中以键值对的形式存储数据。它提供了一种持久化的存储解决方案,与会话存储(SessionStorage)相比,LocalStorage 中的数据不会在浏览器关闭后被清除。

主要特点:
持久性:

存储的数据在浏览器关闭后依然存在,直到被显式删除。
存储容量:

每个源(域名、协议、端口的组合)通常可以存储约 5MB 的数据,不同浏览器可能有所不同。
简单的 API:

使用简单的 JavaScript API 进行数据的存取。
基本用法:
存储数据:

javascript
复制代码
localStorage.setItem(‘key’, ‘value’);
读取数据:

javascript
复制代码
const value = localStorage.getItem(‘key’);
删除数据:

javascript
复制代码
localStorage.removeItem(‘key’);
清空所有数据:

javascript
复制代码
localStorage.clear();
使用场景:
用户偏好设置:

存储用户的主题选择、语言偏好等设置。
购物车信息:

保存用户添加到购物车的商品信息,以便在页面重新加载后恢复状态。
用户会话信息:

在用户登录后保存用户信息,避免每次加载页面都需要重新登录。
离线应用:

使得某些应用在没有网络连接时依然能够运行。
注意事项:
安全性:

LocalStorage 是明文存储,敏感信息不应直接存储。
大小限制:

不同浏览器的存储容量限制可能不同,应合理管理数据存储。
同步问题:

LocalStorage 是同步操作,可能会在大量数据处理时导致 UI 卡顿。
LocalStorage 提供了一种方便且简单的方式来存储数据,但在使用时应考虑其特点和限制,选择合适的存储方案。

2、封装token.js

const TokenKey = "admin_user_token"
const ToKeyExpireKey = "admin_user_token_expire"
//获取token
export function getToken() {let token = localStorage.getItem(TokenKey);if(token){if(new Date().getTime() > localStorage.getItem(ToKeyExpireKey)){removeToken();token = null;}}return token;
}//设置token
export function setToken(token) {localStorage.setItem(TokenKey, token);localStorage.setItem(ToKeyExpireKey, new Date().getTime() + 1000*60*60);//设置一个过期时间  1小时
}
//移除token
export function removeToken() {localStorage.removeItem(TokenKey);localStorage.removeItem(ToKeyExpireKey);
}

3、导航栏title设置

document.title = 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词