HTML5缓存

新的API

webStorage

本地存储发展史.png

HTML5本地存储支持情况.jpg

在HTML5中，本地存储是一个window的属性，包括localStorage和sessionStorage

区别

localStorage一直存在本地

sessionStorage窗口一旦关闭就没有了

使用方法

存储数据的方法就是直接给window.localStorage添加一个属性

存值

window.localStorage.a = 3

localStorage["a"] = "sfsf"

推荐使用

取值

var a1 = localStorage.a

var a2 = localStorage["a"]

var a3 = localStorage.getItem("b")

清除值

localStorage.removeItem("a")

localStorage.clear()

查看所有键值

localStorage.key()

var storage = window.localStorage;function showStorage(){ for(var i=0;i<storage.length;i++){ //key(i)获得相应的键，再用getItem()方法获得对应的值 document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>"); }}

注意:

TML5本地存储只能存字符串，任何格式存储的时候都会被自动转为字符串，所以读取的时候，需要自己进行类型的转换

localstorage

sessionstorage

全屏

manifest

离线缓存

使用带来的好处

用户可在应用离线时使用它们

普通用户来说没啥用其实

已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源

所有主流浏览器均支持应用程序缓存，除了IE

这个manifest作为了解

更新的资源，需要二次刷新才会被页面采用

不支持增量更新，只有manifest发生变化，所有资源全部重新下载一次

缺乏足够容错机制

CACHE MANIFEST

告诉浏览器需要缓存的文件

NETWORK:

不需要缓存的文件

FALLBACK:

无法访问，需要替换的文件

拖拽APi

改变DOM结构

事件:

ondragstart

开始拖拽

设置数据

目的地

ondragover

取消默认事件

ondrop

function drop(ev) {\t\tev.preventDefault();\t\tvar data = ev.dataTransfer.getData("girl");\t\tev.target.appendChild(document.getElementById(data));}

webworker

什么是线程

多线程是异步的实现形式

实现

//WEB页主线程var worker =new Worker("js/worker.js"); worker.onmessage =function(evt){ console.log(evt.data);}

子线程中使用postMessage(res);返回数据

也可以终止一个worker的执行

worker.terminate()

file

gelocation

属于navigator

通过navigator.geolocation.getCurrentPosition的回调函数拿到当前的经纬度

见示例代码