關於sessionStorage的移動端兼容問題


 

最近在開發移動端項目時,需要用到的本地存儲的地方不少。都是一些只要記住當前打開窗口的用戶數據就行,所以我選擇用的sessionStorage。

使用場景如下:

A.html頁面需要記錄一條數據{a:1,b:2};

sessionStorage.setItem("data","{a:1,b:2}");

 

B.html頁面取出使用;

sessionStorage.getItem("data"); // 獲取結果為null

 

問題:

如果項目不是單頁面復應用,AB是兩個html文件,需要跳轉href的。我們會發現有些Andiron系統的瀏覽器在B頁獲取是到的結果是null (如:vivo手機自帶的世界之窗瀏覽器)。

原因:

經過分析,其實這並不是這個瀏覽器不支持sessionStorage,因為你還是能獲取到sessionStorage這個對象的。

而是因為sessionStorage是一個當前窗口的數據存儲格式,有些瀏覽器在跳轉新頁面的時候他系統是打開了一個新的webView,把原來的關了,也就相當於我們在瀏覽器打開了一個新窗口。

這樣他就跟我們的sessionStorage原理沖突了,在新頁面當然就獲取不到咯。

所以建議大家做移動端的時候如果不是單頁面復應用的的項目最好不要使用sessionStorage。慎用!

 

解決辦法:(2019年了,哈哈!!   來補充下解決辦法,有用的話支持下我哦^_^  ^_^ ^_^,下面的廣告也是今天補的,不關注我的廣告,給我點個贊也非常謝謝的!^_^)

利用localStorage,和window.name來實現:

window.name屬性:頁面刷新是不會被重置的

A.html頁面

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script>
            //這清除一定要在頁頭,如果是新進入的頁面就清除上次傳存儲的值
            if(window.name === ''){
                localStorage.removeItem("aUser");
                window.name = 'isReload';
            }

        </script>
</head>
<body>
    <script>
            //設置值
            localStorage.setItem("aUser","aaa");
    </script>
</body>
</html>

 

B頁面

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script>
            //這清除一定要在頁頭,如果是新進入的頁面就清除上次傳存儲的值
            if(window.name === ''){
                localStorage.removeItem("bUser");
                window.name = 'isReload';
            }
            //判斷如果A頁面有存儲,那就取出來過渡到B頁面來
            let a = localStorage.getItem('aUser');
            if(a){
                localStorage.setItem('bUser',a);
            }

        </script>
</head>
<body>
    <script>
            //獲取值
            localStorage.getItem("bUser"); //aaa
    </script>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM