首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在每次点击链接时重置sessionStorage?

在每次点击链接时重置sessionStorage,可以通过以下步骤实现:

  1. 首先,需要在点击链接的事件处理函数中添加代码来重置sessionStorage。可以使用JavaScript的addEventListener方法来监听链接的点击事件。
代码语言:javascript
复制
document.getElementById('link').addEventListener('click', function() {
  sessionStorage.clear(); // 清空sessionStorage
});

上述代码中,假设链接的id为"link",当点击该链接时,会触发匿名函数,其中sessionStorage.clear()用于清空sessionStorage。

  1. 在HTML中,需要为链接添加id属性,以便JavaScript代码能够找到该链接。
代码语言:html
复制
<a href="#" id="link">点击链接</a>

上述代码中,id属性值为"link",可以根据实际情况修改。

  1. 以上代码会在每次点击链接时都清空sessionStorage,如果只想在特定条件下清空sessionStorage,可以在事件处理函数中添加条件判断语句。
代码语言:javascript
复制
document.getElementById('link').addEventListener('click', function() {
  if (/* 满足特定条件 */) {
    sessionStorage.clear(); // 清空sessionStorage
  }
});

上述代码中,可以根据实际情况修改条件判断语句。

总结:通过在点击链接的事件处理函数中添加代码来清空sessionStorage,可以实现在每次点击链接时重置sessionStorage的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue中的验证登录状态

中,并跳转到首页 前端每次跳转,就使用导航守卫(vue-router.beforeEach)判断 sessionStorage 中有无 token,没有就跳转到登录页面,有则跳转到对应路由页面。...}) } 这一步最重要的是当账号密码正确,把请求回来的token放在sessionStorage中, #配置路由 然后配置路由新加一个meta属性: { path: '..., name: 'index', component: index, meta:{ needLogin: true } } 判断每次路由跳转的链接是否需要登录...如果浏览器的url改变了(可能是用户手动或浏览器后退按钮),那么url地址会重置到from路由对应的地址。 3.next('/')或next({path:'/'}):跳转到一个不同的地址。...{ // 否则 跳转到登录页面 next({ path: '/' }); } } }) 这里用了router.beforeEach vue-router导航守卫 每次跳转都会判断

2.6K10

前端性能优化(三)——浏览器九大缓存方法

1、http 缓存 http缓存是存在于服务器与浏览器之间,是一种保存资源副本并在下次请求直接使用该副本的技术。...等,上一篇文章以详细介绍,可点击《浏览器缓存机制》查看。...可以直接存储任何类型的数据, js任何类型的数据 、blob流。 可以创建索引,提供高性能搜索功能。 采用事务,保证数据的准确性和一致性。 4、cookie cookie指的就是会话跟踪技术。...setValue - 重置 value 。...当网络断开,可以继续访问页面。 文件缓存到本地,不需要每次都从网络上请求。 稳定性比较好,遇网络故障或服务器故障可以继续访问本地缓存。 加载速度快,缓存资源为本地资源,因此加载速度较快。

1.8K30

前端性能优化(三)——浏览器九大缓存方法

1、http 缓存 http缓存是存在于服务器与浏览器之间,是一种保存资源副本并在下次请求直接使用该副本的技术。...等,上一篇文章以详细介绍,可点击《浏览器缓存机制》查看。...可以直接存储任何类型的数据, js任何类型的数据 、blob流。 可以创建索引,提供高性能搜索功能。 采用事务,保证数据的准确性和一致性。 4、cookie cookie指的就是会话跟踪技术。...setValue - 重置 value 。...当网络断开,可以继续访问页面。 文件缓存到本地,不需要每次都从网络上请求。 稳定性比较好,遇网络故障或服务器故障可以继续访问本地缓存。 加载速度快,缓存资源为本地资源,因此加载速度较快。

1.3K30

前端性能优化(三)——浏览器九大缓存方法

1、http 缓存 http缓存是存在于服务器与浏览器之间,是一种保存资源副本并在下次请求直接使用该副本的技术。...等,上一篇文章以详细介绍,可点击《浏览器缓存机制》查看。...可以直接存储任何类型的数据, js任何类型的数据 、blob流。 可以创建索引,提供高性能搜索功能。 采用事务,保证数据的准确性和一致性。 4、cookie cookie指的就是会话跟踪技术。...setValue - 重置 value 。...当网络断开,可以继续访问页面。 文件缓存到本地,不需要每次都从网络上请求。 稳定性比较好,遇网络故障或服务器故障可以继续访问本地缓存。 加载速度快,缓存资源为本地资源,因此加载速度较快。

2K20

前端成神之路-vue前端项目02

中导入子级路由组件,并设置路由规则以及子级路由的默认重定向 打开Home.vue,在main的主体结构中添加一个路由占位符 制作好了Welcome子级路由之后,我们需要将所有的侧边栏二级菜单都改造成子级路由链接...我们只需要将el-menu的router属性设置为true就可以了,此时当我们点击二级菜单的时候,就会根据菜单的index 属性进行路由跳转,: /110, 使用index id来作为跳转的路径不合适...方法中将path保存到sessionStorage中 saveNavState( path ){ //点击二级菜单的时候保存被点击的二级菜单信息 window.sessionStorage.setItem...重置表单 给el-dialog添加@close事件,在事件中添加重置表单的代码 methods:{ .......addDialogClosed(){ //对话框关闭之后,重置表达 this.

4K10

vuex + sessionstorage 解决vue项目刷新后页面空白数据丢失

ActiveProgressEnum 这个是用户参加活动的进程值,只要按流程走,他会一直变化,但是若初始化进来时,他被我自己预先设定成一个不在后端定义范围内的另一个值,比如任性的100000. vuex里边数据的一个特点,...);//TeamID缩写,需要保留的重要信息 然后开始判断条件是否同时成立: 但是这里有一点,需要利用js的同步逻辑,这段判断的代码要提前放到最顶部,即初始化数据没有设定之前: 因为如果数据设定以后,每次初始化进入页面后...,开始这段判断,该值就已经存在,也会被检测到,场景就会被当作刷新的情况。...还有值得注意的是: ls.removeItem('RYHB_J'); 作用:刷新没有清除session的数据,如果条件成立的话,是需要重定向页面,让页面重新按照之前的步骤再走一边流程的,这时应该清除或者重置一下...if (join && newTeamID && newTeamID > 0) { // 页面刷新的情况 // 刷新没有清除session的数据,这时应该清除或者重置一下

2.9K20

Vue:一个空白的Vue项目,开箱即用

每次新建一个项目都要重新进行自己的配置,因此直接做一个空项目模板,省去了重复工作 个人添加项 添加sass-loader,node-sass支持;(不使用也不影响,不会打包到生产环境) 添加axios,...并封装为ajax; 封装localstorage,sessionStorage(以上两条封装库来自@幻~精灵); 抽离routes并且设置模式为history; 打开Gzip,关闭CSSmap,现在打包后有...gz文件,配合nginx使用; 添加reset.css,重置基本样式,baseURL设置为/,避免加载静态文件报错; 添加vuex支持,抽离state, mutaion, action三个部分,并且做了简单演示...Vuex简单演示 Github链接 git方法 git clone https://github.com/MrTreasure/vue-blank-project 好用顺便star一波,谢谢:)

1.4K120

【前端面试题】01—42道常见的HTML5面试题(附答案)

将不想要提示的frm元素下的 Input元素的 autocomplete属性设置为off 10、如何在HTML5页面中嵌入音频?...本地存储数据持续永久,但是会话存储在浏览器打开时有效,在浏览器关闭时会话重置存储数据。 18、HTML5中的应用缓存是什么? HTML5应用缓存的最终目的是帮助用户离线浏览页面。...cookie的大小是受限的,并且每次请求一个新页面, cookie都会被发送过去,这样无形中浪费了带宽。另外, cookie还需要指定作用域,不可以跨域调用。...(2) Canvas对绘制动画和游戏非常有利;SVG对创建图形(CAD)非常有利。...创建一个缓存 manifest文件后,在HTML页面中提供 manifest链接,代码如下所示。

4.8K10

vue学习:使用tab标签页,刷新页面停留在当前tab

刷新页面会停留在当前标签 思路:当点击某个标签,获取到当前 name 的值,然后刷新页面把name的值赋给activeName,这样每次刷新后activeName总能拿到上次的标签name值,也就会停留在当前页...具体实现方法:获取到标签name值,先把name放到缓存中,之后再刷新页面,再从缓存中取出name值赋给activeName 实现步骤 1、点击某个标签,拿到标签对应的name值 上述原始代码中可以看到...@tab-click 绑定了 handleClick方法,每次点击标签就会触发这个方法 所以可以在这个方法中写一段代码来获取当前标签下的name 方式1: 点开 console.log(tab, event...') } 到这里的话,如果先点击一个标签,然后刷新页面,确实会停留在当前标签,切换标签后刷新,也能达到这个效果 但是如果是首次进入系统,直接点击【创建随机数据】这个菜单,会发现没有自动打开任何一个标签...,因为刷新页面后是获取缓存中的name,而此时标签name的值还没有存到缓存中 我希望每次打开【创建随机数据】菜单后,默认打开第一个标签 可以通过如下方式实现:判断缓存中的 current_name 是否为

2.8K30

vuex在页面刷新后数据被清除

vue是单页面应用,操作都是在一个页面跳转路由;sessionStorage可保证打开页面sessionStorage的数据为空,而如果是localStorage则会读取上一次打开页面的数据。...那怎么才能不用每次修改state同时也要修改sessionStorage呢?...因为我们是只有在刷新页面才会丢失state里的数据,想法在点击页面刷新先将state数据保存到sessionStorage,然后才真正刷新页面 beforeunload这个事件在页面刷新先触发的。...我们总不能每个页面都监听这个事件,所以选择放在app.vue这个入口组件中,这样就可以保证每次刷新页面都可以触发。...$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新将vuex里的信息保存到sessionStorage

3K00

Valine 留言记录与最后编辑时间

监听 input propertychange change 事件,设定时间变量并获取当前时间写入本地储存,将本地储存的时间写入动态添加的目标元素,从本地储存读取数据判断是否显示最后编辑时间。...).find('b').text('') : $('.v .timeRecord').show().find('b').text(utls.getItem('timeRecord')) 清空本地储存 点击按钮提交后...(); 已知存在的bug 如果只输入 emoji 表情,无法记录到本地储存 已修复(加个点击事件,每次点击记录值) 提交评论后刷新页面,本地储存仍存在.....setTimeout 而不是 setInterval (避免重复添加) 初始化判断 textarea 本地储存值,需要判断是否为 null (因为 textarea 没有储存初始值, change 只需判断...”) 通过判断本地储存 textarea 的值来控制 input propertychange change 后 timeRecord 的显示/隐藏;(通过判断 timeRecord 值来控制,初始化无法读取到本地储存的

7410

导航守卫beforeEach的运用

前端常常需要实现的一个功能,比如一个商城,跳转到某些页面,个人中心等就需要登录过才能进去,不然就先跳转到登录页面之后才能跳转到需要登录之后才能查看的页面,此功能就需要导航守卫来完成比较好。...实现或者通过vuex+sessionStorage实现,用一个变量保存是否登录过,或者有没有token判断等方式 if (res.data.code === 200) { //成功...} }).catch(err => { console.log(err, "err"); next("/notFindPage"); }); } }); 当一个导航触发,...如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。...meta:{ requireAuth:true } }, 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148321.html原文链接

40420

前端面试题-每日练习(2)

这提供了一种原生的方法来创建交互式和动态的图形,游戏和数据可视化。 二、用于媒介回放的video和audio元素 HTML5 DOM 为audio和video元素提供了方法、属性和事件。...这消除了对插件(Flash)的依赖,并提供了更好的可访问性和可定制性。...元素应该作为介绍内容或者导航链接栏的容器。 3.Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接点击每个链接可以链接到其他页面或者当前页面的其他部分。...关闭窗口后, sessionStorage 即被销毁。同时“独立”打开的不同窗口,即使是同一页面, sessionStorage 对象也是不同的 cookies会发送到服务器端。...区别2: link 引用 CSS ,在页面载入时同时加载;@import 需要页面网页完全载入以后加载。

17220
领券