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

Posted 2020-11-17 Hi娜娜

前言

　　前阶段，测试提了个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;
      }
    }