zoukankan      html  css  js  c++  java
  • 关于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>
  • 相关阅读:
    单例模式
    Curator Zookeeper分布式锁
    LruCache算法原理及实现
    lombok 简化java代码注解
    Oracle客户端工具出现“Cannot access NLS data files or invalid environment specified”错误的解决办法
    解决mysql Table ‘xxx’ is marked as crashed and should be repaired的问题。
    Redis 3.0 Cluster集群配置
    分布式锁的三种实现方式
    maven发布项目到私服-snapshot快照库和release发布库的区别和作用及maven常用命令
    How to Use Convolutional Neural Networks for Time Series Classification
  • 原文地址:https://www.cnblogs.com/hrw3c/p/7216861.html
Copyright © 2011-2022 走看看