关于H5本部缓存localStorage，sessionStorage

摘要： 目录ECharts异步加载ECharts数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有更高的要求。...

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

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

使用方法：

localStorage.setItem("menuTitle", arrDisplay);

sessionStorage.getItem('key_null')

sessionStorage.removeItem('page')

localStorage.clear()

监听本地存储发生变化的函数
window.addEventListener("storage",function(e){本地存储发生变化时执行的函数XXXXXX},true);

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

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

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;
    }
}

分类：

技术点：

相关文章：