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

关于H5本部缓存localStorage,sessionStorage的更多相关文章

  1. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  2. cookie和localstorage sessionStorage的概念、区别、使用场景

    本文分为三大板块: 1 webStorage的概念 2 cookie/localStorage/sessionStorage的介绍 3 三者之间的共同点和区别 **所有代码引用均来自 作者:OBKor ...

  3. h5的缓存机制

    H5的缓存,大概有localstorage.sessionstorage.cookie和manifest. 一.LocalStorage LocalStorage是永久性的本地缓存,存储在客户端的浏览 ...

  4. 本地存储常用方式 localStorage, sessionStorage,cookie 的区别 和 服务器存储session

    本地存储:把一些信息存储到客户端本地(主要目的有很多,其中有一个就是实现多页面之间的信息共享)       1. 离线缓存(xxx.manifest)  H5处理离线缓存还是存在一些硬伤的,所以真实项 ...

  5. iOS开发和localStorage/sessionStorage

    一.前言 在近期的工作中,有前端同学告诉我要清除localStorage,我当时对localStorage完全没有概念,所以就在w3c看了一下相关的内容,下面简单的介绍一下.算是对iOS开发者普及H5 ...

  6. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

  7. 如何实现Selenium自动化读取H5手机缓存

    更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 原文链接:http://www.cnblogs.com/zishi/p/6890675.html 前言: 由于Se ...

  8. localStorage sessionStorage cookie indexedDB

    目录: localStorage sessionStorage cookie indexedDB localStorage localStorage存储的数据能在跨浏览器会话保留 数据可以长期保留,关 ...

  9. localStorage sessionStorage 增强版

    1. 保留了localStorage sessionStorage的(setItem getItem removeItem clear key)api,使用上几乎差不多 2. 增强了setItem方法 ...

随机推荐

  1. CC1310电源

    CC1310的电源好扯,把目前遇到的问题记录一下 1 全局LDO和DCDC的输出电压问题 手册上要求的VDDR和VDDR_RF的电压范围是1.7~1.95V,但实际测试时, 在接收状态下无论是全局LD ...

  2. C# delegate

    1. delegate example1 class Program { public delegate int MyDelegate(int i); int MyFunc(int i) { retu ...

  3. B. Shaass and Bookshelf DP

    http://codeforces.com/contest/294/problem/B 据说是贪心,我用了一个复杂度是2e8的dp水过去了. 其实这题就是给你n个数,每个数有两个权值,分成两组,使得第 ...

  4. python第十七天-----Django初体验

    Django是一个MTV框架 M:models(数据库) T:templates(放置html模版) V:views(处理用户请求) 那么传说中的MVC框架又是什么呢? M:models(数据库) V ...

  5. Android笔记:如何在Fragment里使用findViewById()方法?

    在Activity中,可以直接用findViewById(int id),通过xml的id来找到对应的View. 查找官方的api,具体如下: https://developer.android.go ...

  6. Hibernate自动建表问题

    自动见表配置 <property key="hibernate.hbm2ddl.auto">update</property> 运行时出现了一下错误 org ...

  7. SQLserver聚集表、堆和索引

    SQL Server 表使用下列两种方法之一来组织其分区中的数据页: 聚集表是有聚集索引的表.数据行基于聚集索引键按顺序存储.聚集索引按 B 树索引结构实现,B 树索引结构支持基于聚集索引键值对行进行 ...

  8. (转)ant 使用指南

    ant 使用指南  文件转载自:http://www.cnblogs.com/hoojo/archive/2013/06/14/java_ant_project_target_task_run.htm ...

  9. Linux下Java安装与配置

    一.卸载系统自带的JDK 如果Linux已经自带OpenJdk,我们需要将它卸载掉,否则可以直接[安装JDK] 查看Linux自带的JDK是否已安装,输入如下命令查看JAVA版本信息. java -v ...

  10. 【转载】java项目中经常碰到的内存溢出问题: java.lang.OutOfMemoryError: PermGen space, 堆内存和非堆内存,写的很好,理解很方便

    Tomcat Xms Xmx PermSize MaxPermSize 区别 及 java.lang.OutOfMemoryError: PermGen space 解决 解决方案 在 catalin ...