Localstorage在Safari隐私模式下的使用

很多时候我们需要将一些数据保存在本地,一般情况,我们都会采用cookie来存储数据,但是对于比较大的数据cookie就无能为力了,我们只能另觅他径,这时html5提供的localstorage不失为一种解决方法。但是localstorage比较是一种新引进的方法,贸然的应用到项目中,很大几率会出现问题。

之前我就遇到这样几个问题,我用localstorage将手机网站的menu部分的html保存到本地,然后在已定时间内,访问同网站其他页面,menu部分的内容就不用再重复请求了,只需要直接使用本地保存的数据。但是我遇到了两个问题:

1、localstorage内容过期的问题,localstorage与cookie是有很大的区别的,cookie有过期时间,只在一定时间内有效,但是对于localstorage来说,一旦保存,就会以文件形式保存在本地,清除浏览器记录也不会清除掉localstorage,除非手动的去清除,不然会永远存在。这肯定不是我们所需要的,这会对我们以后的内容更新等各方面有很大的影响。

所以在选择使用localstorage之前,需要考虑好这些情况,既然localstorage没有这样一个失效的机制,那么我们在使用之前就需要先给他设置实现一个这样的机制,具体怎么实现方法很多。可以用cookie和localstorage配合使用来实现一个localstorage过期的辅助类。

2、在Safari隐私模式下localstorage不能设置的问题,这是一个比较奇特的问题,曾经困扰了我很久,因为localstorage的各种方法在Safari隐私模式下表面上都是正常运行的,但是运行结果却很奇特,虽然没有任何报错,我们所需要的数据却没有正确的保存到localstorage中。最后我发现在该浏览器隐私模式下,数据没办法保存到localstorage中,但是我们不可能因为这一个浏览器不能使用就抛弃这个东西,那么我们只能选择平稳退化,在不影响其他浏览器表现形式的情况下,保证在该模式下运行的正常。所以根据这些问题特征我们可以判断当前环境是否支持localstorage的设置,现在暂知的就是在Safari隐私模式下,选择是使用localstorage还是最原始的环境来获取数据。下面是一个辅助方法来帮助我们判别支持情况。

function isSafariPrivateMode(){
    if(/.*version\/([\w.]+).*(safari).*/i.test(navigator.userAgent)){
        try{
            localStorage.setItem("p",1);
            return false;
        }catch(err){
            return true;
        }
    }else{
        return false;
    }
}
  • 支付宝二维码 支付宝
  • 微信二维码 微信
相关文章