一、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

  在H5中webStorage其实就是在web上存储数据，分为两种： 


  sessionStorage 在浏览器关闭时存储的数据将消失---临时存储 

  localStorage     可以一直存在 --- 永久存储

注：webStorage致命的缺点没有到期时间，

4、webStorage写法

  注：webStorage中存储的内容全为字符串
1、储存：localStorage.setItem(key,value); 

    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格式数据
    与cookie相似，JSON.stringfy 与JSON.parse

  7、StorageEvent对象会包含下列的属性。      

window.addEventListener("storage", handle_storage, false); 
function handle_storage(e) {  

  if (!e) { e = window.event; }  

}  

StorageEvent 对象
属性 类型 描述
key string 被修改的键。
oldValue any 修改前的值（如果是增加新的键值，则该属性为null）
newValue any 修改后的值（如果是删除键值，则该属性为null）
url* string 触发当前存储事件的页面的url
* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早，没有包含这一变更。为兼容性考虑，使用url属性前，你应该先检查它是否存在，如果没有url属性，则应该使用uri属性

要注意一点，在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。

总结：如果需要判断是否支持本地存储，可以通过window.sessionStorage或者window.localStorage去判断。

sessionStorage会话结束后即清空，且同一窗口不同标签下的页面sessionStorage不共用

dom操作：

5、离线缓存

以appache服务器为例：
index.html-------
<html lang="zh-hans" manifest="offline.appcache">
注：manifest 设置后所有文件资源都优先走离线缓存，默认离线缓存当前页面。
       第一次从服务器加载离线文件，第二次再读离线文件因此加载页面后需再刷新一次页面
注：fe 前端开发工程师（Front Engineer）
offline.appcache 是在appache中配置mime.types中增加 
text/cache-manifest         manifest

text/cache-manifest         appcache

传图
创建 offline.appcache 文件，这里放在index.html同级目录下
offline.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

删除离线缓存

1、清除浏览器缓存记录中的文件
2、

//在谷歌浏览器地址栏输入

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()

});

由上例可以知道，缓存的不只是显示定义的文件，比如上例中的 applicationcache/时便会默认保存index.html为映射的数据，并且包含offline.appcache文件，很多时候会遇到一次文件 更新线上老是不更新，这个时候随便在manifest配置文件中做一点修改即可更新。

这个时候如果不做offline.appcache的更新的话，缓存将不会更新，原因是index.html被缓存了，检测的仍然是原manifest清单各个页面统一管理自己的manifest清单，意思是a页面配置了common.js，b页面也配置了common.js，意思是a页面更新后，b页面的manifest不更改的话，b页面依旧读取的是老版本的文件，这个有一定道理却也有一定浪费，需要公共页面做处理。


错误：Application Cache Error event: Failed to commit new cache to storage, would exceed quota
重启浏览器就好了..

查看浏览器版本，手机端或pc端等信息
=> navigator.userAgent
=> "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36"
侦测用户是否在线（网络是否畅通）
navigation.onLine = true|false
// 监测用户是否在线

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

案例：计算随机的100个数能被3整除的输出（ 原来 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，离线缓存的更多相关文章

  1. HTML5离线缓存（Application Cache）

    HTML5离线缓存又名Application Cache,是从浏览器的缓存中分出来的一块缓存区,要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源. ...

  2. HTML5 离线缓存管理库

    一.HTML5离线缓存技术 支持离线缓存是HTML5中的一个重点,离线缓存就是让用户即使在断网的情况下依然可以正常的运行应用.传统的本地存储数据的方式有 localstorage,sessionsto ...

  3. HTML5离线缓存问题

    HTML5离线缓存问题 1.应用程序缓存 什么是应用程序缓存(Application Cache)? HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问. ...

  4. HTML5离线缓存

    参考文档:http://www.w3cschool.cc/html/html5-app-cache.html HTML5 应用程序缓存 又称离线缓存 ,即使断线了,刷新后也还是缓存了原来的页面,不会4 ...

  5. Html5离线缓存详细讲解

    离线缓存是Html5新特性之一,简单理解就是第一次加载后将数据缓存,在没有清除缓存前提下,下一次没有网络也可以加载,用在静态数据的网页或游戏比较好用.当然,Html5新的特性都不是所有浏览器都能支持的 ...

  6. 使用html5的离线缓存技术

    突然想用html5的离线缓存,但是一直没有成功,在各种群里问发现很多人都没什么经验,最终终于在各种论坛找到解决方案了.下面就简单记录一下相关情况. 一.离线缓存的优点 我们都知道离线缓存主要是用来减少 ...

  7. 使用 jQuery Mobile 与 HTML5 开发 Web App —— HTML5 离线缓存

    本文要介绍的,是 HTML5 离线网络应用程序的特性,离线网络应用程序在 W3C 中的实际名称是 "Offline Web applications" ,也称离线缓存.当用户打开浏 ...

  8. HTML5 manifest离线缓存

    一.基本概念 离线缓存是HTML5新引入的技术,能够让你的Web应用程序指定哪些文件可以缓存在本地,使得你的网络断开时依然可以通过本地的缓存来进行访问浏览. 二.使用方法 1. MIME type 声 ...

  9. H5离线缓存机制-manifest

    简介:Manifest 其实就是web应用的一种缓存机制,主要用于现在webapp应用中,它是浏览器自己的一种机制,随着移动互联网时代的到来,网络可靠性降低,如果我们已经将需要的文件缓存下下来,一旦网 ...

随机推荐

  1. Sqli-labs之sql注入基础知识

    (1)注入的分类 基于从服务器接收到的响应  ▲基于错误的SQL注入 ▲联合查询的类型 ▲堆查询注射 ▲SQL盲注 •基于布尔SQL盲注 •基于时间的SQL盲注 •基于报错的SQL盲注 基于如何处理输 ...

  2. 代码收藏系列--javascript--日期函数

    /** * 获取当前时间的简短函数 * @returns {String} * @@example getTimeStamp() 结果是:2017-07-12 09:21:30 */ function ...

  3. 新的JavaScript数据结构Streams

    最近在网上看到了一个新的 Javascript 小程序——Streams,起初以为是一个普通的 Javascript 类库,但读了关于它的介绍后,我发现,这不是一个简单的类库,而且作者的重点也不是这个 ...

  4. git使用笔记（十四）cat-file

    By francis_hao    Mar 18,2018   git cat-file :提供仓库中对象实体的类型.大小和内容的信息 概要 git cat-file (-t | -s | -e | ...

  5. vim正则表达式小结

    http://note.youdao.com/noteshare?id=7ca2ac5d2f37fcb0e7a2a9c811c6e568

  6. git clone 指定分支的内容

    使用Git下载指定分支命令为:git clone -b 分支名仓库地址 使用Git下载v.2.8.1分支代码,使用命令:git clone -b v2.8.1 https://git.oschina. ...

  7. ubuntu 安装微信开发者工具

    https://github.com/cytle/wechat_web_devtools 实测:64位  32位的可以... 参考命令; 2030 sudo apt-get install wine1 ...

  8. qq快速登陆

    http://www.cnblogs.com/1996V/p/7481823.html qq快速登陆

  9. Java中的Class.forName

    在做JAVA EE开发的过程中,更多的是使用框架来提高开发效率.越来越发现,之前很基础的一些东西,都忘记的差不多了.从今天开始慢慢的复习一下基础.今天在看JDBC的时候,就有一个有趣的地方,之前学的时 ...

  10. LVS三种模式的区别及负载均衡算法

    LVS简介 LVS(Linux Virtual Server)即Linux虚拟服务器,是一个虚拟的服务器集群系统,由章文嵩博士在1998年5月成立,在linux2.6+后将lvs自动加入了kernel ...