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

浏览器本地存储和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 = 

http://www.mrgr.cn/news/61813.html

相关文章:

  • Flutter动画渐变
  • net Attribute 特性 、 Property 属性
  • 基于随机森林的智能手机用户行为分类及流量预测分析
  • 每日读则推(十四)——Meta Movie Gen: the most advanced media foundation models to-date
  • WPF+MVVM案例实战(三)- 动态数字卡片效果实现
  • Adobe Media Encoder--将可变帧率视频转为固定帧率
  • 【遗传算法】孤岛模式下的微电网优化调度模型
  • 将多个commit合并成一个commit并提交
  • 探访宇树科技的G1人形机器人:未来消费级机器人的先驱
  • 闲一品交易平台:SpringBoot技术的新境界
  • Win7如何安装支持asp+mdb程序,安装配置IIS
  • [实时计算flink]安全访问最佳实践
  • 新版达梦数据库查看数据库版本信息id_code无法直接显示版本号
  • NewStarCTF2024-Week4-Web-WP
  • 关于我、重生到500年前凭借C语言改变世界科技vlog.12——深入理解指针(2)
  • 【原创分享】详述中间件的前世今生
  • 北斗短报文终端-全星魅北斗手持终端-北斗有源终端
  • 提升RAG系统的回答质量:PDF解析代码详解-PdfParser核心流程
  • ELK之路第三步——日志收集筛选logstash和filebeat
  • Java Lock/AQS ReentrantLock 源码
  • 3DDFA-V3——基于人脸分割几何信息指导下的三维人脸重建
  • IP-guard与Ping32文档加密解决方案对比,选择适合自己的解决方案
  • html设置颜色相关等样式,需要在js层传入相关颜色参数
  • 爬虫设计思路
  • SpringBoot框架:闲一品交易平台的新突破
  • SpringBoot框架:闲一品交易的新引擎