html5 的存储
html5提供了很多存储的功能,诸如localStorage,sessionStorage,indexedDB,还有离线缓存等,本次主要介绍离线缓存跟本地存储。
离线缓存
使用离线存储可以缓存部分文件在本地,当网络断开的时候还可以照常使用,这个需要一个配置文件,一般这么写:
< html manifest="test.manifest">
然后你需要在你的文件test.manifest文件里面定义那些内容是需要缓存的,那些是不可以缓存的,(以下代码是从http://www.cnblogs.com/xqhppt/p/4157862.html copy的)
CACHE MANIFEST
#上面一句必须
#v1.0.0
#需要缓存的文件
CACHE:
a.js
b.css
#不需要缓存的文件
NETWORK:
*
#无法访问页面
FALLBACK:
404.html
值得一提的是缓存的文件是不能使用通配符的,必须一个一个的写出来,然后就可以尝试拔网线了,哈哈。
locastrage
这个大家应该用的比较多了,其实很简单,主要就是getItem,setItem,clear等方法,值得一提的事在同源的页面下,locastrage是共享的,同时有一个叫onstorage的事件,额,这个ie跟其他浏览器有点区别,因为ie的这个事件是在document上的,其他的浏览器在windows上面,看个例子:
window.onstorage=function(e){
console.log(e.key+"-"+ e.newValue+ "-"+e.oldValue)
}
然后,我同时打开两个页面,在其中一个页面上直接设置一个新的key叫testNewKey,于是我打印出如下结果:
testNewKey-testNewKey-new-null
我在修改他的值,得到如下结果:
testNewKey-testNewKey-new2-testNewKey-new
哈哈,这个东西可以做同源页面不同窗口的通讯使用,目前项目中尚未用到,不过确实很棒的东西,这个比postmessage好玩一点(postmessage支持自己内部的iframe,自己打开的页面,打开自己的页面,用一个自称萝卜的人的说法,自己的孩子,自己的爹,还有肚子里的孩子可以使用postmessage,onstrorage可以支持兄弟的),至于getItem,setItem,removeItem之类的不想在此博客重复了,这个太基本了,就键值对保存。
最后,值得一提的就是localStorage是有容量限制的,有的浏览器是10M,有的是5M(针对同一个域名,即一个源),这个可以通过try-catch语句去检测是不是已经满了,满了再去存储会报错,这个报错可以catch到的,不过一般的应用很难用完吧,10M的字符串,基本不会用完的。
html5 的存储的更多相关文章
- HTML5本地存储——IndexedDB(一:基本使用)
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
- 吓哭原生App的HTML5离线存储技术,却出乎意料的容易!【低调转载】
吓哭原生App的HTML5离线存储技术,却出乎意料的容易![WeX5低调转载] 2015-11-16 lakb248 起步软件 近几天,WeX5小编编跟部分移动应用从业人士聊了聊,很多已经准备好全面拥 ...
- html5 离线存储
在html页面中引入manifest文件 <html manifest="sample.appcache"> 在服务器添加mime-type text/cache-ma ...
- html5 webDatabase 存储中sql语句执行可嵌套使用
html5 webDatabase 存储中sql语句执行可嵌套使用,代码如下: *); data.transaction(function(tx){ tx.executeSql("creat ...
- 【读书笔记】HTML5 Web存储
PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL. Cookie Cookie是HTML4中在客户端 ...
- HTML5本地存储——IndexedDB(二:索引)
在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...
- HTML5离线存储原理
找到一篇介绍离线缓存的,感觉比之前看到的解释的更透彻,新的知识点记录如下: 大家都知道Web App是通过浏览器来访问的,所以离线状态下是无法使用app的.其中web app中的一些资源并不经常改变, ...
- html5 离线存储 worker
html5 离线存储 <!DOCTYPE html> <html manifest="cache.manifest"> <!--manifest存储- ...
- [转]HTML5本地存储——Web SQL Database
在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...
随机推荐
- IDEA 热部署设置(JRebel插件激活)
参考原文链接:https://blog.csdn.net/feidi7783/article/details/80607374
- workbench使用小笔记(不定期持续更新)
1. 删除不使用的工作空间 在使用workbench时,之前可能建了好几个工作空间,现在有一些不使用了,每次打开都能还能看到它们,对于强迫症来说多少有一些不爽.如下图: 现在,就把那些不使用的工作空间 ...
- react中对于redux的封装
const createStore = (reducer)=>{ //默认的state对象 let state = {}; //将所有订阅的事件存在在这个数组中 let listeners = ...
- Max Sum Plus Plus HDU - 1024
Max Sum Plus Plus HDU - 1024 Now I think you have got an AC in Ignatius.L's "Max Sum" ...
- websocket flutter
https://stackoverflow.com/questions/51077233/how-can-i-use-socket-in-flutter-app import 'dart:io'; i ...
- 2019年3月10日 装饰器进阶-模拟session
ser_dic={'username':None,'login':False}#用户字典,反应登入状态,用字典做全局变量 def idf(func):#验证登入信息是否正确 def wrapper(* ...
- 查看mysql中sql语句执行时间
查看mysql版本:select version();方法一: show profiles.1. Show profiles是5.0.37之后添加的,要想使用此功能,要确保版本在5.0.37之后. ...
- ios高级开发之多线程(三)GCD技术
GCD是基于C的API,它是libdispatch的的市场名称.而libdispatch作为Apple公司的一个库,为并发代码在多核硬件(跑IOS或者OS X)上执行提供有力支持. 那么我们为什么要用 ...
- 如何解决WebBrowser.DocumentCompleted事件的多次调用
转载:https://www.cnblogs.com/rchlz/archive/2009/02/27/1399274.html 关于DocumentCompleted事件,MSDN给出的解释是在文档 ...
- 第 9 章 数据管理 - 074 - 如何安装和配置 Rex-Ray?
Rex-Ray 安装和配置方法 Rex-Ray 是一个优秀的 Docker volume driver 安装和配置方法 Rex-Ray 以 standalone 进程的方式运行在 Docker 主机上 ...