首页 > 代码库 > 关于H5本部缓存localStorage,sessionStorage

关于H5本部缓存localStorage,sessionStorage

HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间限制的数据存储
  • sessionStorage - 针对一个 session 的数据存储

之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

使用方法:

localStorage.setItem("menuTitle", arrDisplay);
sessionStorage.getItem(‘key_null‘)
sessionStorage.removeItem(‘page‘)

在做项目的过程中遇到少有的safari浏览器 H5本地存储不支持的情况,刚开始以为是手机型号和IOS版本的关系,经过对比排查发现是手机开启了无痕浏览的原因导致的,查了一下总结如下:

手机Safari浏览器中具体表现是:

  • localStorage对象仍然存在
  • 但是setItem会报异常:QuotaExceededError
  • getItem和removeItem直接忽略

Safari中控制台截图
技术分享

 

判断浏览器是否无痕

if (typeof localStorage === ‘object‘) {
    try {
        localStorage.setItem(‘localStorage‘, 1);
        localStorage.removeItem(‘localStorage‘);
        return true;
    } catch (e) {
        //Storage.prototype._setItem = Storage.prototype.setItem;
        //Storage.prototype.setItem = function() {};
        alert(‘不支持本地存储‘);
        return false;
    }
}

 

关于H5本部缓存localStorage,sessionStorage