实现关闭标签页退出网站的功能

Garfield2333 2020-09-22 04:15:49

目前网站的设计是当关闭整个浏览器窗口时，会删除cookies里的sessionID，从而再打开页面时需要登录。
但当不关闭整个浏览器，仅关闭网站标签页时（网站只有一个标签页，不会打开新的页面），登录状态则仍会保留，可以绕过登录回到之前登录后的页面。

想实现的功能是当关闭网站页面（标签页）时，可以退出登录状态（比如删除cookies等）。我目前查到的思路有两种：1.利用sessionstorage，关闭标签页可以清除里面的信息，但我不知道怎样用这个去清除cookies。2.直接清除cookies，但是我不知道怎样捕获“关闭标签页”这个动作来触发清除cookies。

希望有人可以指点一下，不是我查到的这两种思路也可以，希望方法不要太复杂。非常谢谢！

...全文

2718 7 打赏收藏转发到动态举报

写回复

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

風灬雲 2020-09-23

打赏
举报

回复

js 能判断出是关闭标签页还是关闭整个浏览器吗？我了解的好像就只有一个beforeunload事件只能监听当前窗口；整个浏览器的事件是获取不到的吧；

落落叶叶无声 2020-09-23

打赏
举报

回复

关闭标签，可以用 onunload 事件捕获关闭标签的动作两种写法： 1. <body onunload="clearcookie()"> 2. window.onunload = function() { clearcookie()}

Garfield2333 2020-09-23

打赏
举报

回复

引用 6 楼瑟瑟发抖的小人物的回复:

你存的是cookie还是session。。。。

在cookie里存的sessionId

尚稻山 2020-09-23

打赏
举报

回复

你存的是cookie还是session。。。。

Garfield2333 2020-09-23

打赏
举报

回复

引用 2 楼落落叶叶无声的回复:

关闭标签，可以用 onunload 事件捕获关闭标签的动作

两种写法：

1. <body onunload="clearcookie()">
2. window.onunload = function() { clearcookie()}

我今天试了这个，有的浏览器并不支持，包括onbeforeunload也是。而且不知道为什么，虽然我的cookies里有sessionId，但是我在用document.cookie.length查询cookie长度的时候显示的是0，是我不能操作sessionId还是存的位置不对？

Garfield2333 2020-09-23

打赏
举报

回复

引用 3 楼風灬雲的回复:

js 能判断出是关闭标签页还是关闭整个浏览器吗？我了解的好像就只有一个beforeunload事件只能监听当前窗口；整个浏览器的事件是获取不到的吧；

我今天试了一下，onbeforeunload和onunload还根据浏览器不同效果不同，体验不是很好。我想的是能不能把sessionId存到sessionStorage里，不存在浏览器的cookies里，这个有办法实现吗？

chenrynet 2020-09-22

打赏
举报

回复

sessionstorage

公司的一个项目突然要加一个在关闭浏览器标签页退出登录的功能，当时首先想到的就是获取浏览器标签页的关闭事件然后执行退出登录方法，浏览器标签页的关闭事件有onbeforeunload和onunload： onunload、onbeforeunload都是在刷新或关闭时调用，可以在<script>脚本中通过window.onunload来指定或者在<body>里指定...

vue点击菜单实现多标签页tab,打开关闭多个页面（右击关闭功能）

2.效果说明现在有四个tag标签（tag1，tag2，tag3，tag4），如下图，选中的是tag2标签，我们需要新增一个按钮实现关闭tag2左侧标签，关闭tag2右侧标签，关闭除了tag2以外的其他标签，关闭全部标签(回到home页) 四个tag标签存放在pageTags数组里 pageTags:[ { path: '/tag1', name: 'tag1', }, { .

此篇文章我主要介绍，vue中如何实现多标签页面管理功能，效果如图所示：实现多标签管理功能，对于刚接触vue的新手来说是一个相对比较复杂的功能，实现此功能其实是对vuex、vue-router的综合应用，但是千万不要怕，经验和能力都是在一个个小功能的摸索和实现积攒而来的。希望本篇文章对有需要实现类似功能的小伙伴，有一点点借鉴效果。关于vue-router应用参考： https://blog.csdn.net/sunshouyan/article/details/107016023 关于vuex应用参考

使用element-ui 做出导航菜单与Tabs 标签页联动，并实现Tabs标签的重新加载、关闭所有、关闭其它等功能文章目录前言一、直接上代码总结前言这是我第一篇博客希望大家多多关注提示：以下是本篇文章正文内容，下面案例可供参考一、直接上代码代码如下（示例）： import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings war.

87,904

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章