zoukankan      html  css  js  c++  java
  • 关于sessionStorage储存登录随机码,实现浏览器tab页切换免登录功能

    前提:sessionStorage浏览器的tab页切换的时候,是不共享的

    原理:window的storage事件(H5),localStorage的tab页是可以共享的

    为什么不用localStorage:因为localStorage在关闭浏览器后重新打开,还会存在,不符合需求

    (function() {
         //这里面的token是你存在sessionStorage里面的用户标识的key值
            if (!sessionStorage.length) {
                // 这个调用能触发目标事件,从而达到共享数据的目的
                localStorage.setItem('token', Date.now());
            };
            // 该事件是核心
            window.addEventListener('storage', function(event) {
                if (event.key == 'token') {
                    // 已存在的标签页会收到这个事件
                    localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
                    localStorage.removeItem('sessionStorage');
                
                } else if (event.key == 'sessionStorage' && !sessionStorage.length) {
                    // 新开启的标签页会收到这个事件
                    var data = JSON.parse(event.newValue),
                        value;
                
                    for (let key in data) {
                        sessionStorage.setItem(key, data[key]);
                    }
                }
                //可以在这里写你是否要免登录的逻辑
            });
        })();

    storage事件:打开多个同源页面(tab页)的时候,更改sessionstorage和localstorage的时候出发(同一个页面进行的更改不会触发事件

    event.key 本页面的storage的所有key值。

    event.newValue 本页面进行的localStorage.setItem行为的时候,新增tab页链接到你的页面获得的新的key值的value:即:localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));行为的sessionStorage被新页面捕捉到

  • 相关阅读:
    pgsql查询优化之模糊查询
    两款不同应用场景的Wpf分页控件
    C# 客户端程序调用外部程序的三种实现
    WPF DataGrid自动生成序号
    WPF控件自适应屏幕
    NOPI实现导入导出泛型List,支持自定义列
    WPF蒙板弹窗
    定时发送邮件
    数据库基础知识介绍(MySQL)
    动态数据透视表
  • 原文地址:https://www.cnblogs.com/web-chuan/p/9335311.html
Copyright © 2011-2022 走看看