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));
}
0 条评论
下一页
为你推荐
查看更多
