html5 离线存储 地理信息与本地存储
搭建离线应用程序
①服务器设置头信息 :
AddType text/cache-manifest .manifest
② html标签加 :
manifest=“xxxxx.manifest”
③写manifest文件 : 离线的清单列表
先写 : CACHE MANIFEST
FALLBACK : 第一个网络地址没获取到,就走第二个缓存的
NETWORK :无论缓存中存在与否,均从网络获取
web Workers
Worker运行环境
navgator : appName、appVersion、userAgent、platform
location : 所有属性都是只读的
self : 指向全局 worker 对象
所有的ECMA对象,Object、Array、Date等
XMLHttpRequest构造器
setTimeout和setInterval方法
close()方法,立刻停止worker运行
importScripts方法
内容编辑
contenteditable = "true"
语言输入
<input type="text" x-webkit-speech/>
地理位置对象
navigator.geolocation
单次定位请求 :getCurrentPosition(请求成功,请求失败,数据收集方式)
请求成功函数
经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
时间戳 : new Date(position.timestamp)
请求失败函数
失败编号 :code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息,但失败了
3 : 设置了timeout值,获取位置超时了
数据收集 : json的形式
enableHighAcuracy : 更精确的查找,默认false
timeout : 获取位置允许最长时间,默认infinity
maximumAge : 位置可以缓存的最大时间,默认0
多次定位请求 : watchPosition(像setInterval)
移动设备有用,位置改变才会触发
配置参数:frequency 更新的频率
关闭更新请求 : clearWatch(像clearInterval)
本地存储:
Cookie
数据存储到计算机中,通过浏览器控制添加与删除数据
Cookie的特点
存储限制
域名100个cookie,每组值大小4KB
客户端、服务器端,都会请求服务器(头信息)
页面间的cookie是共享
Storage
sessionStorage
session临时回话,从页面打开到页面关闭的时间段窗口的临时存储,页面关闭,本地存储消失
localStorage
永久存储(可以手动删除数据)
Storage的特点
存储量限制 ( 5M )
客户端完成,不会请求服务器处理
sessionStorage数据是不共享、 localStorage共享
Storage API
setItem():
设置数据,key\value类型,类型都是字符串可以用获取属性的形式操作
getItem():
获取数据,通过key来获取到相应的value
removeItem():
删除数据,通过key来删除相应的value
clear():
删除全部存储的值
存储事件:
当数据有修改或删除的情况下,就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
Key : 修改或删除的key值,如果调用clear(),key为null
newValue : 新设置的值,如果调用removeStorage(),key为null
oldValue : 调用改变前的value值
storageArea : 当前的storage对象
url : 触发该脚本变化的文档的url
注:session同窗口才可以,
html5 离线存储 地理信息与本地存储的更多相关文章
- 容器化RDS|计算存储分离 or 本地存储?
随着交流机会的增多(集中在金融行业,规模都在各自领域数一数二),发现大家对 Docker + Kubernetes 的接受程度超乎想象, 并极有兴趣将这套架构应用到 RDS 领域.数据库服务的需求可以 ...
- HTML5基础扩展——地理位置、本地存储、缓存
HTML5扩展,继上两篇博客,我们来看一下HTML5的一些扩展的功能,由于HTML5更多是为了兼容电脑浏览器,安卓浏览器,苹果浏览器更多浏览器,或者说为这些浏览器提供一个统一的标准.因此目前在手机上的 ...
- html5 localStorage实现表单本地存储
随笔开头,我不得不吐槽,为什么我的随笔每次发布之后,都会在分分钟之内移出首页.好气啊!! 进入正题了,项目中有许多表单输入框要填写,还有一些单选复选框之类的.用户可能在填写了大量的信息之后,不小心刷新 ...
- HTML5学习总结-07 WebStorage 本地存储
一 Storage sessionStorage session临时回话,从页面打开到页面关闭的时间段 窗口的临时存储,页面关闭,本地存储消失 localStorage 永久存储(可以手动删除数据)S ...
- (尚030)Vue_案例_存储数据(localStorage本地存储技术)
当刷新页面时,会变为原来的状态 1.问题:当我刷新是不希望改变原来状态 需要缓存我当前的数据 2.究竟是缓存在内存里还是在文件里??? 缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏 ...
- HTML5系列三(多媒体播放、本地存储、本地数据库、离线应用)
各浏览器对编码格式的支持情况 audio和video元素的属性介绍 1.src:媒体数据的URL地址 <video src="pr6.mp4"></video&g ...
- Html5本地存储+本地数据库+离线存储
首先介绍什么叫存储: cache:通常把它叫做缓存,功能就是把从DB,或者磁盘拿出来的东西放在缓存里面,这样的话可以减少读取磁盘的IO. 磁盘文件:通常把一些图片或者一些视频都存放在磁盘上. 数据库: ...
- HTML5 学习总结(三)——本地存储
一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
随机推荐
- iOS UITabBar
参考文章:http://www.cnblogs.com/wendingding/p/3775488.html 简单明了,不用再总结了.
- mysql 5.5中文乱码问题
一.登录MySQL查看用SHOW VARIABLES LIKE ‘character%’;下字符集,显示如下:+--------------------------+----------------- ...
- sqlite3命令行
1.查看版本信息 sqlite3 -verion 2.创建/打开数据库 sqlite3 数据库名 例:sqlite3 test.db 如果test.db不存在就创建 如果存在,则打开3.退出 .q/. ...
- Grunt实现自动化单元测试
http://www.tuicool.com/articles/rAnaYvn 直奔主题: 一.安装grunt-contrib-qunit npm install grunt-contrib-qu ...
- MySQL动态添删改列字段
动态增加列字段: ); 动态删除列字段: alter table TableName drop column field_id; 动态修改列字段: alter table TableName chan ...
- Java经典案例之-“成绩等级划分”
/** * 描述:在对话框中输入学习成绩,利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示, * 60分以下的用C表示. * 分析:可以利用三目运算符 ...
- zoj-3782-Ternary Calculation
题目链接 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5269 题目很简单,直接把所有情况列出来. 我的AC代码 #inclu ...
- oracle求时间差的常用函数
oracle求时间差的常用函数 求时间差: 天: ROUND(TO_NUMBER(END_DATE - START_DATE)) 小时: ROUND(TO_NUMBER(END_D ...
- 《深度探索C++对象模型》笔记——Data语意学
Data Member的绑定 inline member functin躯体之内的一个data member绑定操作会在整个class声明完成之后才发生. argument list中的名称还是会在它 ...
- Canvas rotate- 旋转
Canvas rotate- 旋转 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...