ios中safari无痕浏览模式下,localStorage的支持情况

Posted Hi娜娜

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ios中safari无痕浏览模式下,localStorage的支持情况相关的知识,希望对你有一定的参考价值。

前言
  前阶段,测试提了个bug,在苹果手机中无痕模式下,搜索按钮不好使,无法跳页,同时搜索历史也没有展示(用户搜索历史时使用localStorage存储)。
正文
  ios上Sarfari在无痕模式下,浏览器假装支持localStorage,并在全局window上暴漏了该方法,所以校验是有localStorage对象的,但是调用setItem进行保存的时候,就报Error: QuotaExceededError ... : The quota has been exceeded.
 
因此,进行了个小测试......,可能测试不够全面!
1.测试机型
  iPhone7 Plus  版本 11.3
  iPhone6 Plus  版本 11.3.1
  iPhone6     版本 10.2.1
  iPhoneSE        版本 9
  oppe r9
2.测试浏览器
  Sarfari    UC    自带浏览器
 
3.结果:
  iOS9,iOS10    Sarfari
    setItem 报错
    getItem null
  iOS 11    Sarfari
    setItem  可set
    getItem  可get
  iOS 11    UC
    setItem  不可set,但不报错
    getItem  null
  安卓机
    可set,可get
 
4.结论:
  只有iOS9、10还存在无痕浏览下localStorage无法使用的情况,iOS11中Sarfari已支持存取localStorage,但是iOS11中UC不支持存localStorage。
所以,在开发过程中使用loaclStorage就需要对以上情况进行兼容,避免 js 报错后影响整个页面的功能。
 
5.解决代码及注意要点:
  1.使用try/catch
  2.只针对setItem,进行判断“浏览器是否开启无痕模式”
//判断浏览是否支持localStorage
function isLocalStorageSupport{
    try {
        var isSupport = ‘localStorage‘ in window && window[‘localStorage‘] !== null;
        if (isSupport) {
        localStorage.setItem("local_storage_test", "1");
        localStorage.removeItem("local_storage_test");
        }
        return isSupport;
    } catch (e) {
        return false;
    }
}
//判断浏览器是否开启无痕模式
function  isInPrivate(){
      try {
        localStorage.setItem("local_storage_test", "1");
        localStorage.removeItem("local_storage_test");
        return false;
      } catch(e){
        return true;
      }
    }

  

以上是关于ios中safari无痕浏览模式下,localStorage的支持情况的主要内容,如果未能解决你的问题,请参考以下文章

localStorage与sessionStorage在safari无痕模式下的情况

Storge 在 Safari 的无痕浏览模式中的坑

Storge 在 Safari 的无痕浏览模式中的坑

ios的坑

怎么关闭无痕浏览模式

让 iPhone Safari 浏览记录隐藏