chroem 89+ A标签打开新窗口导致sessionStorage失效

localStorage作用范围:本地存储,关闭浏览器后,数据依然会保存。同源浏览器窗口可以共享使用localStorage存储的数据。

sessionStorage作用范围:只存在于当前会话页面,当会话结束后,数据也随之销毁,在不同的浏览器窗口中共享。也就是存在于当前浏览器页面,页面关闭,数据也会删除。(注意:通过鼠标右键打开的新标签无法共享sessionStorage)

而这块对于sessionStorage可能一直存在一个误区,在Chrome浏览器89版本前,当前会话页面指的是当浏览器窗口没有关闭时,窗口内同域网站可以共享此数据(同源浏览器多个窗口不共享),当页面全部关闭或窗口关闭后,sessionStorage数据会被摧毁,所以你用a标签跳转还是js跳转都会共享sessionStorage。

而在2021年3月初Chrome浏览器进行了批量更新,更新到89版本后,通过a标签target=”_blank”跳转到新页面时sessionStorage就会丢失。Chrome这一更新可能会导致很多网站的sessionStorage丢失,页面可能直接就崩掉了。

解决办法如下:

1、最简单的解决办法 – a标签添加属性 rel=”opener”

<a href="http://xxx" target="_blank" rel="opener">Link</a>

 

JS对cookies、localStorage、sessionStorage三种数据操作例子

JS对cookies、localStorage、sessionStorage三种数据操作例子;

<script type="application/x-javascript">
    
    function c(str) {
        console.log(str);
    }

    var doc = document;

    var button = document.getElementById("button");

    button.addEventListener("click",function(){
        test1();
        test2();
        test3();


    },false)

    function test1(){

        cookieUtils.set("name","a001");
        cookieUtils.set("pwd","123456");
        cookieUtils.set("age","23");

        c(cookieUtils.get("pwd"));
       // c(cookieUtils.del("pwd"));

        c(doc.cookie);
    }

    function test2(){
        sessionStorageUtils.set("name","a001");
        sessionStorageUtils.set("pwd","123456");
        sessionStorageUtils.set("age","23");

        c(sessionStorageUtils.get("name"))
        c(sessionStorageUtils.get("pwd"))
        c(sessionStorageUtils.get("age"))

        //c(sessionStorageUtils.del("age"))

        c(sessionStorageUtils.get("age"))
    }

    function test3(){
        localStorageUtils.set("name","a001");
        localStorageUtils.set("pwd","123456");
        localStorageUtils.set("age","23");

        c(localStorageUtils.get("name"))
        c(localStorageUtils.get("pwd"))
        c(localStorageUtils.get("age"))

        //c(localStorageUtils.del("age"))

        c(localStorageUtils.get("age"))
    }


    var cookieUtils = {
        set:function(name,value,expires,path,domain,secure){
            if(name.length <= 0){
                alert("至少需要指定一个名字");
                return false;
            }

            var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);

            if(expires instanceof Date){
                cookieText += "; expires=" + expires.toUTCString();
            }
            if(path){
                cookieText += "; path="+path;
            }
            if(domain){
                cookieText +="; domain="+domain;
            }
            if(secure){
                cookieText +="; "+secure;
            }

            document.cookie = cookieText;
            return true;

        },
        get:function(name){
            var cookieText = encodeURIComponent(name) + "=";
            var cookieValue = "";

            var start = document.cookie.indexOf(cookieText);

            if(start > -1){
                var end = document.cookie.indexOf(";",start);
                if(end == -1){
                    end = document.cookie.length;
                }

                cookieValue = encodeURIComponent(document.cookie.substring(start + cookieText.length,end));

            }
            return cookieValue;

        },
        del:function(name){
            this.set(name,"",new Date(0));
        }

    }

    var sessionStorageUtils = {
        set:function(name,value){
            if(name.length <= 0){
                alert("至少需要指定一个名字");
                return false;
            }

            sessionStorage.setItem(name,value);

            return true;

        },
        get:function(name){
            return sessionStorage.getItem(name);
        },
        del:function(name){
            sessionStorage.removeItem(name);
            return true;
        }
    }

    var localStorageUtils = {
        set:function(name,value){
            if(name.length <= 0){
                alert("至少需要指定一个名字");
                return false;
            }

            localStorage.setItem(name,value);

            return true;
        },
        get:function(name){
            return localStorage.getItem(name);
        },
        del:function(name){
            localStorage.removeItem(name);
            return true;
        }
    }


</script>

 

 

HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

 
Copyright © 2008-2021 lanxinbase.com Rights Reserved. | 粤ICP备14086738号-3 |