Safari Private 模式下 localStorage 的问题

现如今好多浏览器都有「隐身模式」,Safari 管这叫「Private Browing」,国内各种牌子的套壳浏览器叫「无痕浏览」。私以为从命名上来说,倒是国内更中文一些。

这种模式下浏览网页踏雪无痕,雁过不留声。具体来说,与正常模式的区别是浏览器不会保存历史记录,没有页面缓存,所有本地数据也都是临时的,页面关闭后无法还原。譬如本文下面要讲到的 localStorage

并不是说这种模式下绝对安全,服务器仍然对用户的浏览是有感知的。所以 IP 什么的依然可以追踪。这世界并不如我们天真设想般烂漫。

--------- LOG ---------
00:01:00 - 一位不具名用户在零点零一分进行了访问
00:02:00 - 一位不愿透露姓名的用户在零点零二分打开了你丢弃在服务器 `社会科学/东方艺术鉴赏/东瀛国浮世绘` 中的资源 `ae2bx86.jpg`

从功能上来说,普通用户大概鲜有人知道这一功能(产品情怀就这样被用户无视,PM 们默默泪目),而开发者则利用其干净的特点来开发调试,排除程序之外的因素导致 bug 的可能。

因为所有本地数据都是临时的,那么问题来了,如果网页代码中还使用了诸如 localStorage 的本地存储,还能生效吗?

答案是肯定的,但只针对本次访问。这个肯定只限于桌面浏览器。 而手机端则不然。

iOS 上 Safari private 模式下浏览器假装支持 localStorage,并在全局 window 上暴露了该方法。但是当你在调用 localStorage.setItem 进行保存的时候就会报 QUOTA_EXCEEDED_ERR 错。

QUOTA_EXCEEDED_ERR:DOM Exception 22:An attempt was made to add something to storage...

考察下面的测试代码:

<button class="setValue">SET</button>
<hr>
<button class="getValue">GET</button>
<script>
    var q = document.querySelector;
    document.querySelector('.setValue').onclick = function () {
        try {
            var time = new Date().getTime();
            localStorage.setItem('time', time);
            alert('set '+time);
        } catch (error) {
            alert(JSON.stringify(error));
        }
    }
    document.querySelector('.getValue').onclick = function () {
        var content = localStorage.getItem('time', new Date().getTime());
        alert('got '+content);
    }
</script>

我在页面放了两个按钮,一个用于向浏览器保存值,一个用于获取。

下面是测试结果:

  • iOS Safari 隐私模式设置值
  • iOS Safari 隐私模式获取值
  • iOS Chrome 隐私模式设置值
  • iOS Chrome 隐私模式获取值

这表明在 iOS 上,不仅是 Safari 在隐私模式中不能使用 localStorage, Chrome 也不行也不行。这不禁让人怀疑跟系统平台的策略有关。

博主是谷粉,很早就入手了 Nexus。本着严谨的做事态度,那肯定也得拿来测试一下丫。而安卓机上的测试则让人无法接受。

  • 安卓 Chrome 隐私模式下设置值
  • 安卓 Chrome 隐私模式下获取值

是的,安卓上面并没有表现出假装支持 localStorage,而是真正的支持,能存能取,能取能用!再次证实了上面的怀疑,这种假装的支持应该是 iOS 的设计哲学。

回过头来想,隐私模式主要的功能不就是让用户的数据不被追踪吗,如果能够存取数据的话,反而没那么隐私了。从这点来说,localStorage 设置不成功倒也考量了些许人文情怀在里面。

问题想当于回到了开发者手中,我们在开发过程中使用 loaclStorage 就需要对这种情况进行兼容,以避免 js 报错后影响整个页面的功能。

下面是兼容代码示例:

function isLocalStorageSupport(){
    try {
        var isSupport = 'localStorage' in window && window['localStorage'] !== null;
        if (isSupport) {
            localStorage.setItem('__test', '1');
            localStorage.removeItem('__test');
        }
        return isSupport;
    } catch (e) {
        return false;
    }
}

为此,我们可以考虑提取一个辅助类来封装 localStorage,这样就可以随时随地放心使用。

时间: 2024-10-23 22:27:21

Safari Private 模式下 localStorage 的问题的相关文章

Oracle IMU模式下REDO格式详解

1. 什么是IMU?IMU的主要作用是什么,也就是说为了解决什么问题? IMU--->In Memory Undo,10g新特性,数据库会在shared pool开辟独立的内存区域用于存储Undo信息, 每个新事务都会分配一个IMU buffer(私有的),一个buffer里有很多node,一个node相当于一个block(回滚块). IMU特性: IMU顾名思义就是在内存中的undo,现在每次更改data block,Oracle 不用去更改这个undo block(也不会生成相应的redo了

MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据

下面我们将逐步讲解怎么在MVC模式下将MongoDB数据读取,并展示在前台Jqgrid表格上.这个"简易系 统"的基本设计思想是这样的:我们在视图层展示表格,Jqgrid相关Js逻辑全部放在一个Js文件中,控制层实现了"增删查改"四个业 务,MongoDB的基本数据访问放在了模型层实现   看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关 系型的数据库MongoDB.no

小技巧:如何在(博客园)TinyMCE编辑器模式下同时插入Flash和Sliverlight以及代码运行框

如标题,已经知道的同学们就不用往下看了,以免浪费时间,本文内容是为博客园新手准备的.   众所周知,博客园发布博文时提供了二种html编辑器:CuteEditor 和 TinyMCE.(其实还有一种纯文本方式,不过很少有用人它,本文就不讨论它了)   TinyMCE相对在代码着色方面更出色,排版出来的文章也更好看,所以博客园推荐大家使用它,但是这东西有一个致命的缺点:如果用它直接插入Sliverlight(Xap),保存后会自动识别为Flash,这令银光侠们苦恼不已,昨天我向博客园团队反馈了,得

Self Host模式下的ASP. NET Web API是如何进行请求的监听与处理的?

构成ASP.NET Web API核心框架的消息处理管道既不关心请求消息来源于何处,也不需要考虑响应消息归于何方.当我们采用Web Host模式将一个ASP.NET应用作为目标Web API的宿主时,实际上是由ASP.NET管道解决了这两个问题.具体来说,ASP.NET自身的URL路由系统借助于HttpControllerHandler这个自定义的HttpHandler实现了ASP.NET管道和ASP.NET Web API管道之间的"连通",但是在Self Host寄宿模式下,请求的

C#在b/s模式下调用斑马打印机,无反应,求助~~

问题描述 C#在b/s模式下调用斑马打印机,无反应,求助~~ 从网上搜得代码如下,有的说可以用,有的说报错,我的就是没有反应,斑马打印机ZT210Fnthex32.dll文件33K的和24K的都试过. 代码如下: 类:using System;using System.IO;using System.Collections.Generic;using System.Text; namespace Barcode{ /*条码打印命令说明 ^XA //条码打印指令开始 ^MD30 //设置色带颜色的

android 听筒模式下 无法播放声音

问题描述 android 听筒模式下 无法播放声音 @Override public void onSensorChanged(SensorEvent event) { float range = event.values[0]; if (range == mSensor.getMaximumRange()){ Toast.makeText(this, "正常模式", Toast.LENGTH_LONG).show(); audioManager.setMode(AudioManage

Silverlight 5 beta新特性探索系列:1.安装Silverlight 5 beta环境以及OOB模式下Silverlight 5 多窗口支持

Silverlight 5 beta版本总算于昨日放出,怀着激动的心情今天将开发环境更新为Silverlight 5 beta版本,并且接触Silverlight 5 beta的第一个新特性:OOB模式下的多窗口的弹出显示. 现在我们开始Silverlight 5 Beta版本的安装,首先需要为VS2010打一个VS2010 SP1补丁,然后我们再下载Silverlight 5 Beta Tools for Visual Studio SP1,一步一步安装完毕,最后我们下载Silverlight

[老老实实学WCF] 第十篇 消息通信模式(下) 双工

原文:[老老实实学WCF] 第十篇 消息通信模式(下) 双工 老老实实学WCF 第十篇 消息通信模式(下) 双工   在前一篇的学习中,我们了解了单向和请求/应答这两种消息通信模式.我们知道可以通过配置操作协定的IsOneWay属性来改变模式.在这一篇中我们来研究双工这种消息通信模式.   在一定程度上说,双工模式并不是与前面两种模式相提并论的模式,双工模式的配置方法同前两者不同,而且双工模式也是基于前面两种模式之上的.   在双工模式下,服务端和客户端都可以独立地调用对方,谁都不用等待谁的答复

MongoDB学习笔记(三) 在MVC模式下通过Jqgrid表格操作MongoDB数据_服务器其它

看到下图,是通过Jqgrid实现表格数据的基本增删查改的操作.表格数据增删改是一般企业应用系统开发的常见功能,不过不同的是这个表格数据来源是非关系型的数据库MongoDB.nosql虽然概念新颖,但是MongoDB基本应用实现起来还是比较轻松的,甚至代码比基本的ADO.net访问关系数据源还要简洁.由于其本身的"非关系"的数据存储方式,使得对象关系映射这个环节对于MongoDB来讲显得毫无意义,因此我们也不会对MongoDB引入所谓的"ORM"框架. 下面我们将逐步