

首页  思维导图  详情



HTML5缓存

2016-12-29 20:11:40   0  举报





仅支持查看

AI智能生成

HTML5离线储存

离线储存

模版推荐

作者其他创作

大纲/内容

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的回调函数拿到当前的经纬度

见示例代码

webStorage

1.什么是数据持久化,什么是本地存储

本地存储发展史.png

HTML5本地存储支持情况.jpg

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

区别

localStorage一直存在本地

sessionStorage窗口一旦关闭就没有了

使用方法

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

存值

window.localStorage.a = 3

localStorage["a"] = "sfsf"

localStorage.setItem("b","isaac");

推荐使用

取值

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:

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

只要manifest文件有任何的更改,用户本地的manifet与服务器的manifest对比，进而更新

拖拽APi

改变DOM结构

事件:

ondragstart

开始拖拽

设置数据

function drag(ev) { ev.dataTransfer.setData("girl", ev.target.id); }

目的地

ondragover

取消默认事件

ondrop

取消默认事件,拿到数据,添加元素

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

 Collect

Get Started

HTML5

 Collect

Get Started

HTML5

 Collect

Get Started

第十六章 HTML5脚本编程

 Collect

Get Started

html5





0 条评论

下一页