浏览器刷新时候不删除信息，关闭后删除用户信息处理办法，浏览器监听刷新以及删除事件、cookie、session、sessionStorage、localStorage区别

首先我们可以了解到：sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage 和 cookie 在所有同源窗口是共享的

那么我们可以根据用户不同需求来进行信息保存处理

 

一般我们常用的监听页面刷新关闭的事件是onbeforeunload()和onunload()

区别：

  1. unbeforeunload()是在页面刷新或关闭之前触发，onubload()在页面刷新或关闭之后触发。
  2. 先unbeforeunload()后onunload()
  3. unbeforeunload()可以禁止onunload()的触发
  4. onunload()无法阻止页面关闭

 注意：onbeforeunoad 在移动端基本都不兼容，onunload则兼容大部分主流移动端浏览器

浏览器刷新时候不删除信息，关闭后删除用户信息处理办法-------也就是区分刷新和退出来执行是否清空用户信息

 

解决思路：来自：https://segmentfault.com/a/1190000019305127

 

  1. 用户关闭浏览器时，记录当前时间，并存于浏览器缓存中
  2. 用户再次打开页面时，获取上次退出的时间，并于当前时间进行比较，若小于5s则表示用户执行的是刷新操作，若大于5s则判定为退出

 

注意： 5s并非固定，要根据实际情况调整

复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>123</div>
  <script>
    // 进入页面执行
    // 记录当前时间并转成时间戳
    const now = new Date().getTime();
    // 从缓存中获取用户上次退出的时间戳
    const leaveTime = parseInt(localStorage.getItem('leaveTime'), 10);
    // 判断是否为刷新，两次间隔在5s内判定为刷新操作
    const refresh = (now - leaveTime) <= 5000;
    // 测试alert
    alert(refresh ? '刷新' : '重新登陆');

    // 退出当前页面执行
    window.onunload = function (e) { // ios 不支持 window.onbeforeunload()
      // 将退出时间存于localstorage中
      localStorage.setItem('leaveTime', new Date().getTime());
    } 
  </script>
</body>

</html>
复制代码

 

cookie、session、sessionStorage、localStorage区别

来自：https://www.jianshu.com/p/bdbae99a3871

 

cookie、session区别

  • cookie 存储于浏览器端，而 session 存储于服务端
  • cookie 的安全性相比于 session 较弱，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
    考虑到安全应当使用session。
  • session 会在一定时间内保存在服务器上。当访问增多时，会占用服务器的资源，所以考虑到服务器性能方面，可以使用cookie
  • cookie 存储容量有限制，单个cookie 保存数据不能超过4k，且很多浏览器限制一个站点最多保存20个cookie。而对于 session ，其默认大小一般是1024k

cookie、sessionStorage、localStorage 异同点

html5 中 webStorage 包含 sessionStorage 和 localStorage
共同点：

  • 都保存在浏览器端，且是同源的

区别：

cookie 数据始终在同源的http请求中携带，而 webStorage 不会再请求中携带，仅仅在本地存储

存储大小区别，cookie 是4k，webStorage 可以达到5M甚至更大

数据有效时间区别： sessionStorage 仅仅是会话级别的存储，它只在当前浏览器关闭前有效，不能持久保持；localStorage 始终有效，即使窗口或浏览器关闭也一直有效，除非用户手动删除，其才会失效；cookie 只在设置的 cookie 过期时间之前一直有效。

作用域区别：sessionStorage 不在不同的浏览器窗口中共享，即使是同一个页面； localStorage 和 cookie 在所有同源窗口是共享的

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

Cookies:服务器和客户端都可以访问；大小只有4KB左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过POST或者GET的通道发送到服务器；每个域5MB；没有过期数据，它将保留知道用户从浏览器清除或者使用Javascript代码移除

 

posted @   糖~豆豆  阅读(943)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决
Live2D
欢迎阅读『浏览器刷新时候不删除信息，关闭后删除用户信息处理办法，浏览器监听刷新以及删除事件、cookie、session、sessionStorage、localStorage区别』
点击右上角即可分享
微信分享提示
AI IDE Trae