关于H5本部缓存localStorage，sessionStorage

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

• localStorage - 没有时间限制的数据存储   一直存在除非用户手动清除缓存;是基于域的，任何该域下的全部页面均可访问localStorage
• sessionStorage - 针对一个 session 的数据存储  浏览器关闭时清除

以前，这些都是由 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浏览器中具体表现是：

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