当前位置：首页 > news >正文

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

news 2024/10/30 14:52:25

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);
}