博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Safari无痕模式下,storage被禁用问题
阅读量:5873 次
发布时间:2019-06-19

本文共 2107 字,大约阅读时间需要 7 分钟。

前言

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

解决方案

我们项目框架上的解决方法是对storage进行一层封装,遇到这种开启无痕模式的情况,会定义一个window的全局变量,把之前准备存放到storage的内容改为存到这个全局变量中。

注意,无痕模式下localStorage和sessionStorage对象本身依然是存在的,只是调用setItem方法是会报错。下面是无痕模式下报错的截图:

所以正确的判断代码应该是这样:

try {      sessionStorage.setItem('private_test', 1);    } catch (e) {      //无痕模式    }复制代码

我们会另外定义一个NameStorage对象,在原生storage失效时使用:

// 隐私模式下面,把临时值存到window.name中去  function NameStorage(type) {    this.store = NameStorage[type];  }  Object.assign(NameStorage.prototype, {    getItem: function(key) {      return this.store[key];    },    setItem: function(key, value) {      this.store[key] = value;      this._saveNameValue();    },    removeItem: function(key) {      delete this.store[key];      this._saveNameValue();    },    clear: function() {      this.store = {};      this._saveNameValue();    },    _saveNameValue: function() {      var ret = {        session: NameStorage.session,        local: NameStorage.local      }      window.name = JSON.stringify(ret);    }  });复制代码

上面会把所有的local和session数据存储到window.name上去,然后在每个页面启动时,调用一下keepName方法,把window.name的数据拿下来放到NameStorage上面。这时候,只需要调用new NameStorage('local')来代替localStorage进行操作就行了

function keepName () {    if (keepName.done) {      return;    }    var ret;    if (window.name) {      try {        ret = JSON.parse(window.name);      } catch (e) {        ret = {};      }    }    if (!_.isPlainObject(ret)) {      ret = {};    }    if (!ret.session) {      ret.session = {};    }    if (!ret.local) {      ret.local = {};    }    NameStorage.session = ret.session;    NameStorage.local = ret.local;    keepName.done = true;  }复制代码

另外一些补充

● 无痕模式下,localStorage和sessionStorage的报错信息是:QuotaExceededError,code为22,这个其实是storage存储空间用完了报的错,就比如当前浏览器storage内存为5mb,你已经存储了5mb的数据后,再进行setItem操作就会报这个错误。

● 所以我猜想无痕模式下,浏览器是把storage的内存先清空,然后再设置最大值为0,这样调用setItem就直接报错了。

● 另外无痕模式下cookie是可以使用的,大概因为cookie是跟服务器有关,而storage是属于浏览器的特性吧。

● 最后还有一种情况,就是无痕模式下打开了某个页面,然后把浏览器关闭再打开,这个时候会打开访问的页面,但是window.name已经丢失了,所以就拿不到以前存储的数据了。这种情况只能页面做容错处理了。

转载于:https://juejin.im/post/5c0fdda4f265da614f7028c0

你可能感兴趣的文章
图像超分辨率(Super-Resolution)技术研究
查看>>
[转] js中的钩子机制(hook)
查看>>
多线程 并发编程(一)
查看>>
CSS属性特性
查看>>
Angular CLI 使用教程指南参考
查看>>
html5 css多列布局
查看>>
android 时间格式 各种转换
查看>>
GDB笔记
查看>>
图像处理之基础---图像高效不失真缩放既卷积应用
查看>>
JS 相等判断 / 类型判断
查看>>
Web项目启动加载数据至内存--SpringApplicationListener实现
查看>>
Acey.ExcelX4.2版本发布
查看>>
修改支付宝账号的授权方式
查看>>
SET ROWCOUNT
查看>>
NOIP2015DAY2T2子串
查看>>
PHP 程序员的技术成长规划
查看>>
美国插画家Mike Bear作品欣赏
查看>>
zookeeper源码 — 一、单机启动
查看>>
fiddler之请求过滤(Filters)
查看>>
Could not read from remote repository
查看>>