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 ...
随机推荐
- java 读写excle
2014-04-16 20:38:20 java读写excel 晚上打算研究如何c来编写
- struts配置文件和国际化
一.加载包struts2-core-2.3.24.1.jar struts-default.xml :各种栈 org.apache.struts2 -->> default.propert ...
- java系列--MD5加密
方案一: /** * 1.对文本进行32位小写MD5加密 * @param plainText 要进行加密的文本 * @return 加密后的内容 */ public static String te ...
- centos 软件库安装
./configure: error: the HTTP rewrite module requires the PCRE library. You can either disable the mo ...
- QT第三天学习
回顾: 布局: 绝对位置法: 手工布局:QLayout 可视化布局:设计器 VB MFC JAVA C# cocos QT信号和槽 ---------------------------------- ...
- Angular - - ngRoute Angular自带的路由
ngRoute $routeProvider 配置路由的时候使用. 方法: when(path,route); 在$route服务里添加一个新的路由. path:该路由的路径. route:路由映射信 ...
- jquery $.getJSON()跨域请求
以前总是没搞明白是怎么回事,现在是迫不得已,就仔细看了看说明文档,终于测试成功了,记下 1,同一域名下和其他的请求可以是一样的 js: 代码如下: var url="http://loc ...
- quick-cocos2d-x添加到Pomelo的支持
https://github.com/luoxinliang/pomelo_quick_x/tree/master/pomelo_quick_x
- I帧/P帧/B帧---术语解释
视频压缩中,每帧代表一幅静止的图像.而在实际压缩时,会采取各种算法减少数据的容量,其中IPB就是最常见的. 简单地说,I帧是关键帧,属于帧内压缩.就是和AVI的压缩是一样的. P是向前搜索的意思.B ...
- 你真的懂ajax吗?
前言 总括: 本文讲解了ajax的历史,工作原理以及优缺点,对XMLHttpRequest对象进行了详细的讲解,并使用原生js实现了一个ajax对象以方便日常开始使用. damonare的ajax库: ...