webStorage,离线缓存
一、webStorage
1、目标
1、了解cookie的不足之处,引入webstorage的概念
2、学习并且掌握webstorage有哪两种
3、学习并且掌握sessionStorage
4、学习并且掌握localStorage
5、反复练习localStorage的用法
6、掌握离线存储技术
7、掌握多媒体标签的一些基本属性
8、自主开发出一个自定义视频播放器的控件
9、熟悉使用webwoker
10、了解webSocket的原理
1、HTML5中的本地存储概念是什么?
很多时候我们会存储用户本地信息到电脑上,例如:比方说用户有一个填充了一半的长表格,然后突然网络连接断开了,这样用户希望你能存储这些信息到本地,当网络恢复的时候,他想获取这些信息然后发送到服务器进行存储 现代浏览器拥有的存储被叫做“LocalStorage”,你可以存储这些信息
2、本地存储的生命周期是什么?
本地存储没有生命周期,它将保留知道用户从浏览器清除或者使用Javascript代码移除
2、本地存储和cookies之间的区别
3、webStorage
sessionStorage 在浏览器关闭时存储的数据将消失---临时存储
localStorage 可以一直存在 --- 永久存储
4、webStorage写法
localStorage.key = value;//key、value为键值对形式,key作为唯一标识,value做位置,不建议使用 这一种,但是别不认识
注:如果key存在时,更新value
2、获取数据:localStorage.getItem(key);
localStorage.key //不建议使用这一种,但是别不认识
注:如果key不存在返回null
3、删除:localStorage.removeItem(key);
注:一旦删除,key对应的数据将会全部删除
4、全部清除:localStorage.clear();
注:某些时候使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据
5、遍历localStorage存储的key
.length 数据总量,例:localStorage.length
.key(index) 通过索引获取key值,从0开始; 例:var key=localStorage.key(index);
6、存储JSON格式数据
7、StorageEvent对象会包含下列的属性。
if (!e) { e = window.event; }
}
属性 | 类型 | 描述 |
---|---|---|
key |
string | 被修改的键。 |
oldValue |
any | 修改前的值(如果是增加新的键值,则该属性为null) |
newValue |
any | 修改后的值(如果是删除键值,则该属性为null) |
url * |
string | 触发当前存储事件的页面的url |
* 注意: url 属性早期的规范中为uri属性。 有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没有url属性,则应该使用uri属性 |
要注意一点,在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。
总结:如果需要判断是否支持本地存储,可以通过window.sessionStorage或者window.localStorage去判断。
sessionStorage会话结束后即清空,且同一窗口不同标签下的页面sessionStorage不共用
dom操作:
5、离线缓存
<html lang="zh-hans" manifest="offline.appcache">
text/cache-manifest manifest
text/cache-manifest appcache
CACHE MANIFEST # v1 #offline.appcache 所引用的页面默认自动缓存
#这里一般离线缓存长期不变的内容
CACHE: ../js/jquery-2.0.min.js
../css/bootstrap.css #页面其他其他资源,*表示除了缓存(CACHE)的资源,其他资源都走线上
#若不配置,则除CACHE外其他资源不会被加载
NETWORK: * #当服务器挂了(或请求资源不存在时),a链接资源请求失败了,采用“替补"方式
FALLBACK: gallery-1.html offline.html
images/ images/offline.png
删除离线缓存
//在谷歌浏览器地址栏输入
chrome://appcache-internals
由更新机制来说,首次更新manifest时,因为页面加载已经开始 甚至已经完成,缓存更新尚未完成,浏览器仍然会使用过期的资源;浏览器是当Application Cache有更新时,该次不会使用新资源,第二次才会使用。因此在实际应用中我们需要在这个时候update事件中执行window.reload事件。详解(http://developer.51cto.com/art/201502/465095.htm)
window.applicationCache.addEventListener("updateready", function(){
window.location.reload()
});
window.location.reload()
});
由上例可以知道,缓存的不只是显示定义的文件,比如上例中的 applicationcache/时便会默认保存index.html为映射的数据,并且包含offline.appcache文件,很多时候会遇到一次文件 更新线上老是不更新,这个时候随便在manifest配置文件中做一点修改即可更新。
这个时候如果不做offline.appcache的更新的话,缓存将不会更新,原因是index.html被缓存了,检测的仍然是原manifest清单各个页面统一管理自己的manifest清单,意思是a页面配置了common.js,b页面也配置了common.js,意思是a页面更新后,b页面的manifest不更改的话,b页面依旧读取的是老版本的文件,这个有一定道理却也有一定浪费,需要公共页面做处理。
// 监测用户是否在线
function onlineStatus() {
if (navigator.onLine) {
var status = document.getElementById('online-status')
status.innerHTML = '在线'
status.className = 'badge success'
} else {
status.innerHTML = '离线'
status.className = 'badge'
}
}
window.addEventListener('online', onlineStatus, false)
window.addEventListener('offline', onlineStatus, false)
1、应用场景:
a)、离线浏览--缓存数据(新闻、阅读、视频)
b)、本地保存用户的操作数据(邮箱软件----离线编辑、在线发送)
2、HTML5提供的数据持久化技术:
a)、Application Cache 本地缓存所应用的文件
b)、WEB SQL 关系型数据库,通过SQL数据访问
c)、IndexDB 索引数据库
3、Application Cache
a)、Manifest文件
b)、Application Cache文件
c)、特点
Manifest文件必须有变化才更新
一次必须更新Manifest文件中的所有文件
下次才生效
7、webwoker
Web Workers 是在HTML5中新增的,用来在web应用程序中实现后台处理的一种技术
在HTML4中,js创建的程序都是单线程的,如果花费时间比较长的话web界面就会长时间没有响应,最恶劣的情况还会跳出一个脚本提示框: 提示脚本运行时间过长,是否继续。。。。于是就引出了本文的主角:Web Workers API
postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
onmessage() 方法 - 收数据,数据为e.data。
如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:
我们可以做什么:
1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信
2.可以在worker中通过importScripts(url)加载另外的脚本文件
3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()
4.可以使用XMLHttpRequest来发送请求
5.可以访问navigator的部分属性 有那些局限性:
1.不能跨域加载JS
2.worker内代码不能访问DOM
3.各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行 4.不是每个浏览器都支持这个新特性
webStorage,离线缓存的更多相关文章
- HTML5离线缓存(Application Cache)
HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...
- HTML5 离线缓存管理库
一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...
- HTML5离线缓存问题
HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...
- HTML5离线缓存
参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...
- Html5离线缓存详细讲解
离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...
- 使用html5的离线缓存技术
突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...
- 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存
本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...
- HTML5 manifest离线缓存
一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...
- H5离线缓存机制-manifest
简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...
随机推荐
- LINUX内核分析第四周——扒开系统调用的三层皮
LINUX内核分析第四周--扒开系统调用的三层皮 李雪琦 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课程http://mooc.study.163.com/course ...
- Linux内核分析8
周子轩 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验目的: 使用gdb ...
- Hadoop1.2.1异常No route to host
Hadoop1.2.1异常Bad connect ack with firstBadLink (No route to host ) 0.说明 Hadoop集群之前运行正常,增加了新节点之后,需要执行 ...
- Yarn 模式 与 电影受众分析系统
yarn模式分为两种模式: 一.Yarn-cluster模式 1.通过spark-submit提交spark jar包(Application),与RM进行通信请求启动AM 2.RM接收到请求之后,会 ...
- Linux基础------文件打包解包---tar命令,文件压缩解压---命令gzip,vim编辑器创建和编辑正文件,磁盘分区/格式化,软/硬链接
作业一:1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) cat /etc/passwd /etc/group > /1.txt2) 将用户信息数据库文件和用户 ...
- 使用Hexo搭建GitHub博客(2018年Mac版)
关于本文 本文仅记录自己学习搭建Hexo博客之时,搭建过程中掉坑的历程总结,对零基础起步的观众朋友可能缺乏某些基础技术的指导,请优先食用下述两篇优质教程: [2018更新]小白独立搭建博客-Githu ...
- Mysql千万级大表优化策略
1.优化sql以及索引 1.1优化sql 1.有索引但未被用到的情况(不建议) (1)避免like的参数以通配符开头时 尽量避免Like的参数以通配符开头,否则数据库引擎会放弃使用索引而进行全表扫描. ...
- Android缓存
一个利用内存缓存和磁盘缓存图片的例子 public class BitmapCache { public static final String TAG = "debug"; pr ...
- WIFI Direct(Wi-Fi P2P)
Wi-Fi Direct技术是Wi-Fi产业链向蓝牙技术发起的挑战,它试图完全取代蓝牙 Wi-Fi Direct是一种点对点连接技术,它可以在两台station之间直接建立tcp/ip链接,并不需要A ...
- re正则模块
1.正则表达式的常用符号 '.' 默认匹配除\n之外的任意一个字符,若指定flag DOTALL,则匹配任意字符,包括换行 '^' 匹配字符开头,若指定flags MULTILINE,这种也可以匹配上 ...