码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2018-06-12 17:11:21      阅读:2211      评论:0      收藏:0      [点我收藏+]

标签:fun   存在   cti   前言   无法   手机   nes   代码   方法   

前言
  前阶段,测试提了个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的支持情况

标签:fun   存在   cti   前言   无法   手机   nes   代码   方法   

原文地址:https://www.cnblogs.com/yuxina/p/9173866.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!