前端:localStorage和浏览器的历史记录(History API)

localStorage

localStorage 是浏览器提供的一种本地存储 机制,用于在客户端(用户的浏览器)中以键值对的形式存储数据。它具有持久性 ,即存储的数据不会因为页面关闭、浏览器关闭或系统重启而丢失,除非用户手动清除或通过代码删除。以下是 localStorage 的详细原理和工作机制:

键值对存储localStorage 以键值对的方式存储数据。每个键和值都是字符串类型。即使存储的是对象或数组,也需要先将其转换为字符串(通常使用 JSON.stringify())。

存储数据

javascript 复制代码
localStorage.setItem('key', 'value');

使用 setItem 方法,开发者可以将一个值(value)存储到 localStorage 中,指定的 key 用于以后读取该值。数据将以字符串形式存储。

读取数据

javascript 复制代码
const value = localStorage.getItem('key');

使用 getItem 方法可以根据 key 读取存储在 localStorage 中的值。如果该键不存在,返回 null

删除数据

javascript 复制代码
localStorage.removeItem('key');

使用 removeItem 方法可以删除存储在 localStorage 中的特定 key 及其对应的值。

清除所有数据

javascript 复制代码
localStorage.clear();

clear 方法会清空 localStorage 中的所有数据。

localStorage 常用于以下场景:

  • 用户偏好设置 :例如保存用户选择的界面主题、语言设置、布局偏好等。当用户再次访问页面时,这些偏好可以从 localStorage 中读取并应用。
  • 表单数据保存 :当用户在填写表单时,可以在输入过程中将数据暂存到 localStorage 中,以防止用户在页面意外关闭或刷新时丢失已填写的数据。
  • 简易缓存:用于存储从服务器获取的数据,使得页面在下次加载时可以更快地显示内容。例如,保存一些用户信息或会话数据以减少 API 调用。
  • 状态管理 :在单页面应用(SPA)中,localStorage 可以用来保存用户的登录状态(如身份令牌 token),从而使用户在刷新页面后依然保持登录状态。

浏览器的历史记录(History API)

History API 是浏览器提供的一组接口,用于操作和管理浏览器的历史记录。常用的操作包括:

  • history.pushState():将一个新的状态对象压入历史堆栈中,不会触发页面刷新。适用于单页应用程序(SPA),允许应用在不重新加载页面的情况下改变 URL。
  • history.replaceState():替换当前堆栈顶端的状态,而不是将新的状态推入堆栈。
  • history.back()history.forward():分别用于回退到上一条记录和前进到下一条记录,模拟浏览器的"后退"和"前进"按钮。
  • 使用 history.pushState() 方法可以在不重新加载页面的情况下改变 URL,并将新的状态推入堆栈中。
  • 当调用 history.back() 时,浏览器会从历史堆栈中弹出最后一个状态,并回到之前的页面。

常用场景:

History API 则用于管理浏览器的导航状态,主要用在单页应用(SPA)中,允许在不重新加载页面的情况下修改 URL,提供类似于多页面导航的体验。

相关推荐
前端 贾公子1 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐2 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
前端小万5 分钟前
一次紧急的现场性能问题排查
前端·性能优化
excel21 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手21 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360224 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep24 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo26 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒1 小时前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用1 小时前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端