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

最新推荐文章于 2025-03-17 09:27:18 发布

原创最新推荐文章于 2025-03-17 09:27:18 发布 · 356 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

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 =