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 ...
随机推荐
- UVa 11308 - Bankrupt Baker
题目大意:给出一些原料和价钱和若干份菜谱,每份菜谱都标明所需的原料和数量,找出所有不超过预算的菜谱. 没什么好说的,主要是对map的运用. #include <cstdio> #inclu ...
- Python科学计算之Pandas
Reference: http://mp.weixin.qq.com/s?src=3×tamp=1474979163&ver=1&signature=wnZn1UtW ...
- 有限状态机(Finite-state machine)
var menu = { // 当前状态 currentState: 'hide', // 绑定事件 initialize: function() { var self = this; self.on ...
- 兼容ie6及以上的阴影滤镜的写法
.subnav{ width: 220px; _width:160px; min-height: 168px; border: 1px solid #d0d8da; background: #fff; ...
- iOS 之 Property List
1. 概念 用于存储串行化对象,xml格式,存储到plist文件中. 2. 用途 存储用户设置. 3. 优点 程序运行时可动态创建和读写. 4. 使用说明 4.1. 获取plist文件 NSStrin ...
- lepus3.7 天兔监控安装手册 CentOS6.5+mysql5.6
lepus3.7 天兔监控安装配置手册 CentOS6.5+mysql5.6 整体环境 192.168.1.250为监控机 192.168.1.248为被监控机 安装LAMP环境 [root@HE3~ ...
- Unable to resolve target 'android-XX'解决办法
在搭建好安卓编译环境后,我用Eclipse导入冲git上下载的安卓源码编译时,会提示 Unable to resolve target 'android-17' 等 “Unable to resolv ...
- 开发团队在TFS中使用Git Repository (二)
使用Git作分支时,仅仅是对提交历史记录的一个引用,创建分支成本非常低,分支的切换快且简单.在分支管理方面,相对其他的版本管理工具,Git可谓是一骑绝尘. 开发过程中,我们可以针对任何的大小功能进行分 ...
- 从jvm的角度来看单例模式
最近在看jvm,发现随着自己对jvm底层的了解,现在对java代码可以说是有了全新的认识.今天就从jvm的角度来看一看以前自以为很了解的单例模式. 了解单例模式的人都知道,单例模式有两种:" ...
- asp.net权限认证:OWIN实现OAuth 2.0 之密码模式(Resource Owner Password Credential)
asp.net权限认证系列 asp.net权限认证:Forms认证 asp.net权限认证:HTTP基本认证(http basic) asp.net权限认证:Windows认证 asp.net权限认证 ...