移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStorage存储一些数据,相比最多能存4k的cookie相比,用起来很好用。但是localStorage在iOS Safari、chrome和UC浏览器中的隐私模式(也叫无痕模式)下无法使用,手机Safari浏览器中具体表现是:

  • localStorage对象仍然存在
  • 但是setItem会报异常:QuotaExceededError
  • getItem和removeItem直接忽略

Safari中控制台截图

判断浏览器是否支持localStorage的方法:

function isLocalStorageSupported() {
var testKey = 'test',
storage = window.sessionStorage;
try {
storage.setItem(testKey, 'testValue');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}

移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题的更多相关文章

  1. Web端本地存储

    1.需求背景:当用户在页面上添加一行一行的数据时,突然发现网络断掉了,页面上编辑的数据没法保存进数据库,所以需要一个本地端的临时保存功能,以便在网络通畅后重新加载出来! 2.解决方案: 结合网上搜刮, ...

  2. Chrome 浏览器的简单设置 无痕模式 暗黑模式 自定义用户目录

    1. Chrome73 新增加了暗黑模式 可以通过修改快捷方式的方式来默认开启方法如下 1.1 关闭浏览器 2.2 鼠标焦点定位到任务栏 Chrome 图标处, 并且按住shift 按键 执行右键操作 ...

  3. 在IOS手机safari浏览器的无痕模式下,localStorage不起作用

    无痕模式是黑色风格,正常模式是白色风格.在无痕模式中,使用localStorage.setItem()会报错,但在window对象下确实有localStorage.setItem方法. if (typ ...

  4. Safari无痕模式下,storage被禁用问题

    前言 Safari开启无痕模式后,localStorage和sessionStorage为空,对其进行set操作也会报错,也就是说这种情况下,storage是被禁止使用了.接下来说一下解决方法. 解决 ...

  5. Safari无痕模式是不能只使用localStorage存储数据要用Cookie做补丁

    safari 无痕浏览情况测试(部分手机)   1.测试机型 iPhone7 Plus  版本 11.3 iPhone6 Plus  版本 11.3.1 iPhone6    版本 10.2.1 iP ...

  6. ios的坑 无痕模式

    我们的一个小应用,用localStorage做了下缓存,测试上线之后有反馈页面数据拉取不到, 最后定位到是localStorage有问题. 是Private Browsing Mode引起的.然后查看 ...

  7. 对端边缘云网络计算模式:透明计算、移动边缘计算、雾计算和Cloudlet

    对端边缘云网络计算模式:透明计算.移动边缘计算.雾计算和Cloudlet 概要 将数据发送到云端进行分析是过去几十年的一个突出趋势,推动了云计算成为主流计算范式.然而,物联网时代设备数量和数据流量的急 ...

  8. 设置浏览器使用的dom模式为IE7

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>设置浏览器使用的dom模式为 ...

  9. DOCTYPE与浏览器模式详解(标准模式&混杂模式)

    关于渲染模式: 在多年以前(IE6诞生以前),各浏览器都处于各自比较封闭的发展中(基本没有兼容性可谈).随着WEB的发展,兼容性问题的解决越来 越显得迫切,随即,各浏览器厂商发布了按照标准模式(遵循各 ...

随机推荐

  1. B-F 字符串匹配算法

    Brute-Froce 算法是串的匹配模式算法中的一种其匹配方式如下: 1.设有字符串 a ,b;a为主串,在 a 中查找 b 串的位置 2.匹配方式如下: 2.1: 分别从 a,b串的第一个元素开始 ...

  2. jqeury 合并单元格

    function mergeCells() { var tbodyTlth = $("#datatable_ajax1 tbody").find("tr").l ...

  3. 《Cracking the Coding Interview 》之 二叉树的创建 与 遍历(非递归+递归version)

    #include <iostream> #include <cstdio> #include <vector> #include <stack> #de ...

  4. ORA-01439: column to be modified must be empty to change datatype

    修改数据库字段类型,但是由于数据表已经存在数据,无法修改: 显示错误:  写道 ORA-01439: column to be modified must be empty to change dat ...

  5. 最近在研究备份和虚拟磁带库(LEGATO + MHVTL + SCST + LanFree)

    最近在研究备份和虚拟磁带库(LEGATO + MHVTL + SCST + LanFree) 有些小成功,MHVTL已经搞定,SCST + LANFREE 正在继续实验中,接着就是LEGATO. 最终 ...

  6. linux下挂载新硬盘

    挂载好新硬盘后输入fdisk -l命令看当前磁盘信息 1.创建新硬盘分区 用fdisk  + 路径 进行分区 进入磁盘,对磁盘进行分区 #fdisk /dev/sdb Command (m for h ...

  7. rocksdb编译测试的正确姿势

    需要先安装 gflags 在进行 make db_bench 不然运行 db_bench 会出现 Please install gflags to run rocksdb tools 错误 bench ...

  8. php openssl 增加密钥

      生成私钥:openssl genrsa 1024 > private.key (注意,1024是密钥的长度,如果密钥较长,相应加密后的密文也会较长) 生成公钥:openssl rsa -in ...

  9. StringGrid 实例4 本例功能: 1、给每个单元格赋值 2、调整当前单元格位置:上下左右;

    实例4 本例功能:1.给每个单元格赋值 2.调整当前单元格位置:上下左右: 运行效果图:

  10. js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装

    1. offsetParent  获取的最近的定位的父元素   offsetLeft/offsetTop  是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...